Скрыть часть границы в меню ul/li

У меня есть меню навигации, которое состоит из ul/li элементов. Элементы li содержат div для форматирования.Скрыть часть границы в меню ul/li

Вот код:

http://jsbin.com/seqenoduze

(вам нужно изменить размер HTML, CSS и JavaScript частей на странице jsbin, чтобы получить меню полноэкранного вместо мобильного меню)

При наведении указателя мыши на элемент меню есть раскрывающееся подменю, в котором перечислены дополнительные элементы. В настоящее время она выглядит примерно так:

Current Menu

Я пытаюсь охватить по части сплошной черной каймой на нижней стороне наведен/активного пункта меню. Что-то вроде этого:

Desired Menu

Идея заключается в том, чтобы дать «текущую вкладку» выглядеть и чувствовать себя в меню.

код выглядит примерно так:

<nav id="catNavMenu"> 
    <div class="wrapper"> 
     <div class="jetmenu-wrapper"><ul class="jetmenu blue"><li class="showhide" style="display: none;"><span class="title">MENU</span><span class="icon"><em></em><em></em><em></em><em></em></span></li> 
      <li class="fix-sub" style=""> <a href="#">Menu Item 1</a> 

       <div class="megamenu full-width" style="display: none;"> 
        <div class="row"> 
         <div class="col2"><a href="#1">Sub Menu Item</a> 
         </div> 
         <div class="col2"><a href="#2">Sub Menu Item</a> 
         </div> 
        </div> 
       </div> 
      </li> 
      <li class="fix-sub" style=""> <a href="#">Menu Item 2</a> 

       <div class="megamenu full-width" style="display: none;"> 
        <div class="row"> 
         <div class="col2"><a href="#1">Sub Menu Item</a> 
         </div> 
         <div class="col2"><a href="#2">Sub Menu Item</a> 
         </div> 
        </div> 
       </div> 
      </li> 
      <li class="fix-sub" style=""> <a href="#">Menu Item 3</a> 

       <div class="megamenu full-width"> 
        <div class="row"> 
         <div class="col2"><a href="#1">Sub Menu Item</a> 
         </div> 
         <div class="col2"><a href="#2">Sub Menu Item</a> 
         </div> 
        </div> 
       </div> 
      </li> 
     </ul></div> 
    </div> 
</nav>

CSS, как:

nav#catNavMenu { 
    border-bottom: 2px dotted #d0d0d0; 
    min-height: 30px; 
    line-height: 30px; 
    margin-bottom: 30px; 
} 
.wrapper { 
    width: 980px; 
    margin: 0 auto; 
    position: relative; 
} 
/* 
NAME: Jet Responsive Megamenu 
AUTHOR PAGE: http://codecanyon.net/user/marcoarib 
ITEM PAGE: http://codecanyon.net/item/jet-responsive-megamenu/5719593 
*/ 
@import url(http://fonts.googleapis.com/css?family=Open+Sans); 
@import"font-awesome.css"; 

/* MENU CONFIGURATION 
**********************************************************/ 
.jetmenu { 
    width: 98%; 
    /*padding: 0;*/ 
    padding-left: 10px; 
    margin: 0; 
    position: relative; 
    float: left; 
    list-style: none; 
    background: #FFFFFF; 
    /*#333333;*/ 
    border-top: 2px dotted #d0d0d0; 
    border-left: 2px dotted #d0d0d0; 
    border right: 2px dotted #d0d0d0; 
    text-transform: uppercase; 
} 
.jetmenu li { 
    display: inline-block; 
    float: left; 
} 
.jetmenu a { 
    -o-transition: all .3s linear; 
    -webkit-transition: all .3s linear; 
    -moz-transition: all .3s linear; 
    transition: all .3s linear; 
    outline: none; 
    z-index: 10; 
} 
.jetmenu > li > a { 
    padding: 10px 14px; 
    font-family:'Open Sans', sans-serif; 
    font-size: 14px; 
    color: #999; 
    text-decoration: none; 
    display: inline-block; 
    border-right: 2px solid transparent; 
    border-left: 2px solid transparent; 
} 
.jetmenu > li:hover > a, .jetmenu > li.active > a { 
    background: #e0e0e0; 
    color: #555; 
    border-right: 2px dotted #d0d0d0; 
    border-left: 2px dotted #d0d0d0; 
} 
/* DROPDOWN CONFIGURATION 
**********************************************************/ 
.jetmenu ul.dropdown, .jetmenu ul.dropdown li ul.dropdown { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    display: none; 
    position: absolute; 
    z-index: 99; 
    min-width: 134px; 
    background: #333333; 
} 
.jetmenu ul.dropdown { 
    top: 60px; 
} 
.jetmenu ul.dropdown li ul.dropdown { 
    left: 100%; 
    top: inherit; 
} 
.jetmenu ul.dropdown li { 
    clear:both; 
    width:100%; 
    font-size: 12px; 
} 
.jetmenu ul.dropdown li a { 
    width:100%; 
    padding: 12px 24px 12px; 
    display:inline-block; 
    float:left; 
    clear:both; 
    font-family:'Open Sans', sans-serif; 
    text-decoration: none; 
    color: #999; 
    box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
} 
.jetmenu ul.dropdown li:hover > a { 
    background: #e0e0e0; 
    color: #555; 
} 
/* dropdowns to left side */ 
.jetmenu ul.dropdown li ul.dropdown.left { 
    left: auto; 
    right: 100%; 
} 
/* SUBMENU INDICATORS 
**********************************************************/ 
.jetmenu .indicator { 
    position: relative; 
    left: 5px; 
    top: 0; 
    font-size: 14px; 
    float: right; 
} 
.jetmenu ul li .indicator { 
    font-size: 12px; 
    top: 1px; 
    left: 10px; 
} 
/* MEGAMENU 
**********************************************************/ 
.jetmenu > li > .megamenu { 
    position: absolute; 
    display: none; 
    background: #FFFFFF; 
    /*#333333;*/ 
    width: 25%; 
    /* top: 60px; */ 
    font-family:'Open Sans', sans-serif; 
    font-size: 12px; 
    color: #999; 
    z-index: 99; 
    padding: 20px 30px 20px; 
    border: 1px solid #000; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
/* megamenu list */ 
.jetmenu li > .megamenu ul { 
    margin: 0 0 20px 0; 
    float: left; 
    padding: 0; 
    display: block; 
    position: relative; 
} 
.jetmenu li > .megamenu ul li { 
    width: 100%; 
    padding: 4px 0; 
} 
.jetmenu li > .megamenu ul li.title { 
    margin: 0 0 8px; 
    padding: 0 0 5px; 
    font-size: 14px; 
    border-bottom: solid 1px #666; 
} 
/* megamenu h5 */ 
.jetmenu li > .megamenu h5 { 
    width: 100%; 
    margin: 0; 
    padding: 0; 
} 
/* megamenu links */ 
.jetmenu li > .megamenu a { 
    color: #999; 
    text-decoration: none; 
    font-size: 12px; 
    -webkit-transition: color 0.3s linear; 
    -moz-transition: color 0.3s linear; 
    -o-transition: color 0.3s linear; 
    transition: color 0.3s linear; 
} 
.jetmenu li > .megamenu a:hover { 
    color: #dedede; 
} 
/* megamenu images */ 
.jetmenu .megamenu img { 
    width: 100%; 
    -webkit-transition: border 0.3s linear; 
    -moz-transition: border 0.3s linear; 
    -o-transition: border 0.3s linear; 
    transition: border 0.3s linear; 
} 
/* to fix right attribute on submenus (menu aligned to left (default)) */ 
.jetmenu > li.fix-sub > .megamenu, .jetmenu > li.fix-sub > .megamenu.half-width, .jetmenu > li.fix-sub > .dropdown { 
    right: 0; 
} 
/* MEGAMENU WIDTHS 
**********************************************************/ 
.jetmenu > li > .megamenu.half-width { 
    width: 50%; 
} 
.jetmenu > li > .megamenu.full-width { 
    width: 100%; 
    left: 0; 
} 
/* MEGAMENU FORM CONFIGURATION 
**********************************************************/ 
.jetmenu li > .megamenu form { 
    width: 100%; 
} 
/* megamenu inputs */ 
.jetmenu li > .megamenu form input[type="text"], .jetmenu li > .megamenu form textarea { 
    padding: 5px; 
    color: #999; 
    background: #444; 
    font-family:'Open Sans', sans-serif; 
    font-size: 14px; 
    border: solid 1px transparent; 
    outline: none; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    -webkit-transition: border 0.3s linear; 
    -moz-transition: border 0.3s linear; 
    -o-transition: border 0.3s linear; 
    transition: border 0.3s linear; 
} 
.jetmenu li > .megamenu form input[type="text"]:focus, .jetmenu li > .megamenu form textarea:focus { 
    border-color: #e0e0e0; 
} 
.jetmenu li > .megamenu form input[type="text"] { 
    width: 100%; 
    margin-top: 10px; 
} 
.jetmenu li > .megamenu form textarea { 
    width: 100%; 
    margin-top: 10px; 
} 
.jetmenu li > .megamenu form input[type="submit"] { 
    width: 25%; 
    float: right; 
    height: 30px; 
    margin-top: 10px; 
    border: none; 
    cursor: pointer; 
    background: #444; 
    color: #777; 
    font-family:'Open Sans', sans-serif; 
    -webkit-transition: background 0.3s linear; 
    -moz-transition: background 0.3s linear; 
    -o-transition: background 0.3s linear; 
    transition: background 0.3s linear; 
} 
.jetmenu li > .megamenu form input[type="submit"]:hover { 
    background: #e0e0e0; 
    color: #555; 
} 
/* MEGAMENU GRID SYSTEM 
**********************************************************/ 
.megamenu .row { 
    width: 100%; 
    margin-top: 15px; 
} 
.megamenu .row:first-child { 
    margin-top: 0; 
} 
.megamenu .row:before, .megamenu .row:after { 
    display: table; 
    content:""; 
    line-height: 0; 
} 
.megamenu .row:after { 
    clear: both; 
} 
.megamenu .row .col1, .megamenu .row .col2, .megamenu .row .col3, .megamenu .row .col4, .megamenu .row .col5, .megamenu .row .col6 { 
    display: block; 
    width: 100%; 
    min-height: 20px; 
    float: left; 
    <!--margin-left: 2.127659574468085%; 
    --> -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
.megamenu .row[class*="col"]:first-child { 
    margin-left: 0; 
} 
.megamenu .row .col1 { 
    width: 14.893617021276595%; 
} 
.megamenu .row .col2 { 
    width: 31.914893617021278%; 
} 
.megamenu .row .col3 { 
    width: 48.93617021276595%; 
} 
.megamenu .row .col4 { 
    width: 65.95744680851064%; 
} 
.megamenu .row .col5 { 
    width: 82.97872340425532%; 
} 
.megamenu .row .col6 { 
    width: 100%; 
} 
/*div.col2:hover { 
    background-color: #9A0101; 
} 

a.q7 { 
    font-size: 1.4em; 
    width:100%; 
    height:100%; 
} 

a.q7:hover { 
    background-color:#9A0101; 
} 

span.q7 { 
    font-size: 1.4em; 
    display:block; 
    width:100%; 
    height:100%; 
} 

span:q7:hover { 
    background-color: #9A0101; 
} 
*/ 
a.q7 { 
    font-size: 1.1em; 
} 
span.q7 { 
    font-size: 1.1em; 
} 
/* RIGHT ALIGNMENT (MENU ITEM) 
**********************************************************/ 
.jetmenu > li.right { 
    float: right; 
} 
.jetmenu > li.right > .megamenu, .jetmenu > li.right > .megamenu.half-width, .jetmenu > li.right > .dropdown { 
    right: 0; 
} 
/* to fix right attribute on submenus (menu aligned to right) */ 
.jetmenu > li.jsright { 
    float: right; 
} 
.jetmenu > li.jsright.last > .megamenu, .jetmenu > li.jsright.last > .megamenu.half-width, .jetmenu > li.jsright.last > .dropdown { 
    right: 0; 
} 
/* ICONS (FONT AWESOME) 
**********************************************************/ 
.jetmenu > li > a > i { 
    line-height: 23px !important; 
    margin-right: 6px; 
    font-size: 18px; 
    float: left; 
} 
/* COLLAPSIBLE MENU 
**********************************************************/ 
.jetmenu > li.showhide { 
    display: none; 
    width: 100%; 
    height: 50px; 
    cursor: pointer; 
    color: #999; 
    background: #333; 
} 
.jetmenu > li.showhide span.title { 
    margin: 15px 0 0 25px; 
    font-family:'Open Sans', sans-serif; 
    float: left; 
} 
.jetmenu > li.showhide span.icon { 
    margin: 17px 20px; 
    float: right; 
} 
.jetmenu > li.showhide .icon em { 
    margin-bottom: 3px; 
    display: block; 
    width: 20px; 
    height: 2px; 
    background: #999; 
} 
/* STYLES 
**********************************************************/ 

/* black */ 
.black > li:hover > a, .black > li.active > a { 
    background: #111111; 
    color: #fff; 
} 
.black ul.dropdown li:hover > a { 
    background: #111111; 
    color: #fff; 
} 
.black li > .megamenu form input[type="text"]:focus, .black li > .megamenu form textarea:focus { 
    border-color: #111111; 
} 
.black li > .megamenu form input[type="submit"]:hover { 
    background: #111111; 
    color: #fff; 
} 
.black li > .megamenu a:hover { 
    color: #dedede; 
} 
/* grey */ 
.grey > li:hover > a, .grey > li.active > a { 
    background: #82837E; 
    color: #fff; 
} 
.grey ul.dropdown li:hover > a { 
    background: #82837E; 
    color: #fff; 
} 
.grey li > .megamenu form input[type="text"]:focus, .grey li > .megamenu form textarea:focus { 
    border-color: #82837E; 
} 
.grey li > .megamenu form input[type="submit"]:hover { 
    background: #82837E; 
    color: #fff; 
} 
.grey li > .megamenu a:hover { 
    color: #dedede; 
} 
/* blue */ 
.blue > li:hover > a, .blue > li.active > a { 
    background: #fff; 
    /*#9A0101*/ 
    ; 
    color: #999; 
} 
.blue ul.dropdown li:hover > a { 
    background: #fff; 
    color: #999; 
} 
.blue li > .megamenu form input[type="text"]:focus, .blue li > .megamenu form textarea:focus { 
    border-color: #fff; 
} 
.blue li > .megamenu form input[type="submit"]:hover { 
    background: #fff; 
    color: #999; 
} 
.blue li > .megamenu a:hover { 
    text-decoration:underline; 
    color:#999; 
    /*color: #FFF;*/ 
    /*#333333;*/ 
    /*#02b8fa;*/ 
} 
/* deeper */ 
.deeper > li:hover > a, .deeper > li.active > a { 
    background: #008C9E; 
    color: #fff; 
} 
.deeper ul.dropdown li:hover > a { 
    background: #008C9E; 
    color: #fff; 
} 
.deeper li > .megamenu form input[type="text"]:focus, .deeper li > .megamenu form textarea:focus { 
    border-color: #008C9E; 
} 
.deeper li > .megamenu form input[type="submit"]:hover { 
    background: #008C9E; 
    color: #fff; 
} 
.deeper li > .megamenu a:hover { 
    color: #008C9E; 
} 
/* green */ 
.green > li:hover > a, .green > li.active > a { 
    background: #88c425; 
    color: #fff; 
} 
.green ul.dropdown li:hover > a { 
    background: #88c425; 
    color: #fff; 
} 
.green li > .megamenu form input[type="text"]:focus, .green li > .megamenu form textarea:focus { 
    border-color: #88c425; 
} 
.green li > .megamenu form input[type="submit"]:hover { 
    background: #88c425; 
    color: #fff; 
} 
.green li > .megamenu a:hover { 
    color: #88c425; 
} 
/* emerald */ 
.emerald > li:hover > a, .emerald > li.active > a { 
    background: #2ecc71; 
    color: #fff; 
} 
.emerald ul.dropdown li:hover > a { 
    background: #2ecc71; 
    color: #fff; 
} 
.emerald li > .megamenu form input[type="text"]:focus, .emerald li > .megamenu form textarea:focus { 
    border-color: #2ecc71; 
} 
.emerald li > .megamenu form input[type="submit"]:hover { 
    background: #2ecc71; 
    color: #fff; 
} 
.emerald li > .megamenu a:hover { 
    color: #2ecc71; 
} 
/* red */ 
.red > li:hover > a, .red > li.active > a { 
    background: #C21A01; 
    color: #fff; 
} 
.red ul.dropdown li:hover > a { 
    background: #C21A01; 
    color: #fff; 
} 
.red li > .megamenu form input[type="text"]:focus, .red li > .megamenu form textarea:focus { 
    border-color: #C21A01; 
} 
.red li > .megamenu form input[type="submit"]:hover { 
    background: #C21A01; 
    color: #fff; 
} 
.red li > .megamenu a:hover { 
    color: #C21A01; 
} 
/* pox */ 
.pox > li:hover > a, .pox > li.active > a { 
    background: #FA023C; 
    color: #fff; 
} 
.pox ul.dropdown li:hover > a { 
    background: #FA023C; 
    color: #fff; 
} 
.pox li > .megamenu form input[type="text"]:focus, .pox li > .megamenu form textarea:focus { 
    border-color: #FA023C; 
} 
.pox li > .megamenu form input[type="submit"]:hover { 
    background: #FA023C; 
    color: #fff; 
} 
.pox li > .megamenu a:hover { 
    color: #FA023C; 
} 
/* orange */ 
.orange > li:hover > a, .orange > li.active > a { 
    background: #ff670f; 
    color: #fff; 
} 
.orange ul.dropdown li:hover > a { 
    background: #ff670f; 
    color: #fff; 
} 
.orange li > .megamenu form input[type="text"]:focus, .orange li > .megamenu form textarea:focus { 
    border-color: #ff670f; 
} 
.orange li > .megamenu form input[type="submit"]:hover { 
    background: #ff670f; 
    color: #fff; 
} 
.orange li > .megamenu a:hover { 
    color: #ff670f; 
} 
/* sunburst */ 
.sunburst > li:hover > a, .sunburst > li.active > a { 
    background: #D46D22; 
    color: #fff; 
} 
.sunburst ul.dropdown li:hover > a { 
    background: #D46D22; 
    color: #fff; 
} 
.sunburst li > .megamenu form input[type="text"]:focus, .sunburst li > .megamenu form textarea:focus { 
    border-color: #D46D22; 
} 
.sunburst li > .megamenu form input[type="submit"]:hover { 
    background: #D46D22; 
    color: #fff; 
} 
.sunburst li > .megamenu a:hover { 
    color: #D46D22; 
} 
/* yellow */ 
.yellow > li:hover > a, .yellow > li.active > a { 
    background: #febf01; 
    color: #222; 
} 
.yellow ul.dropdown li:hover > a { 
    background: #febf01; 
    color: #222; 
} 
.yellow li > .megamenu form input[type="text"]:focus, .yellow li > .megamenu form textarea:focus { 
    border-color: #febf01; 
} 
.yellow li > .megamenu form input[type="submit"]:hover { 
    background: #febf01; 
    color: #222; 
} 
.yellow li > .megamenu a:hover { 
    color: #febf01; 
} 
/* purple */ 
.purple > li:hover > a, .purple > li.active > a { 
    background: #a849a3; 
    color: #fff; 
} 
.purple ul.dropdown li:hover > a { 
    background: #a849a3; 
    color: #fff; 
} 
.purple li > .megamenu form input[type="text"]:focus, .purple li > .megamenu form textarea:focus { 
    border-color: #a849a3; 
} 
.purple li > .megamenu form input[type="submit"]:hover { 
    background: #a849a3; 
    color: #fff; 
} 
.purple li > .megamenu a:hover { 
    color: #a849a3; 
} 
/* pink */ 
.pink > li:hover > a, .pink > li.active > a { 
    background: #F56991; 
    color: #fff; 
} 
.pink ul.dropdown li:hover > a { 
    background: #F56991; 
    color: #fff; 
} 
.pink li > .megamenu form input[type="text"]:focus, .pink li > .megamenu form textarea:focus { 
    border-color: #F56991; 
} 
.pink li > .megamenu form input[type="submit"]:hover { 
    background: #F56991; 
    color: #fff; 
} 
.pink li > .megamenu a:hover { 
    color: #F56991; 
} 
/* RESPONSIVE LAYOUT 
**********************************************************/ 
@media (max-width: 768px) { 
    .jetmenu { 
     padding: 0; 
    } 
    .jetmenu > li { 
     display: block; 
     width: 100%; 
     box-sizing:border-box; 
     -moz-box-sizing:border-box; 
     -webkit-box-sizing:border-box; 
    } 
    .jetmenu > li > a { 
     padding: 15px 25px; 
    } 
    .jetmenu a { 
     width: 100%; 
     background: #FFFFFF; 
     /*#333;*/ 
     box-sizing:border-box; 
     -moz-box-sizing:border-box; 
     -webkit-box-sizing:border-box; 
    } 
    .jetmenu ul.dropdown, .jetmenu ul.dropdown li ul.dropdown { 
     width: 100% !important; 
     left: 0; 
     position: static !important; 
     border: none; 
     box-sizing:border-box; 
     -moz-box-sizing:border-box; 
     -webkit-box-sizing:border-box; 
    } 
    .jetmenu ul.dropdown li { 
     background: #fff !important; 
     border: none; 
    } 
    .jetmenu ul.dropdown > li > a { 
     padding-left: 40px !important; 
    } 
    .jetmenu > li > .megamenu { 
     width: 100% !important; 
     position: static; 
     border-top: none; 
    } 
    .jetmenu > li > .megamenu .row[class*="col"] { 
     float: none; 
     display: block; 
     width: 100% !important; 
     margin-left: 0; 
     margin-top: 15px; 
     -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
     box-sizing: border-box; 
    } 
    .jetmenu > li > .megamenu .row:first-child[class*="col"]:first-child { 
     margin-top: 0; 
    } 
    .jetmenu > li > .megamenu .row { 
     margin-top: 0; 
    } 
    .jetmenu > li > ul.dropdown > li > a { 
     padding-left: 40px !important; 
    } 
    .jetmenu > li > ul.dropdown > li > ul.dropdown > li > a { 
     padding-left: 60px !important; 
    } 
    .jetmenu > li > ul.dropdown > li > ul.dropdown > li > ul.dropdown > li > a { 
     padding-left: 80px !important; 
    } 
} 
@media (min-width: 768px) and (max-width: 900px) { 
    .jetmenu > li > .megamenu { 
     width: 100% !important; 
     left: 0 !important; 
    } 
}

Я пытался добавив border-bottom: 2px solid #fff; и другие подобные вещи, чтобы «прикрыть» границы там, но все только кажется для подталкивания подменю вниз.

Как это сделать?

источник

2015-04-09 SnakeDoc

Вы попробовали псевдоэлемент, чтобы покрыть его? позиционирование их абсолютно означало бы, что они не изменят другие части? В противном случае тень окна также должна работать, поскольку она «не занимает место» в фактическом dom? – jbutler483

Вы можете использовать псевдоэлемент на якоре, чтобы закрыть границу выпадающего меню. Для этого я бы создать активный класс и переключать его при наведении курсора/оставить:

.fix-sub > a { 
    position: relative; 
    z-index: 100; 
} 

.fix-sub.active > a:after { 
    content: ""; 
    position: absolute; 
    background: #fff; 
    height: 1px; 
    left: -2px; 
    right: -2px; 
    bottom: -1px; 
}

JS часть изменена:

$(menu).find("li").bind("mouseenter", function() { 
    $(this).addClass('active'); 
    $(this).children(".dropdown, .megamenu").stop(true, true).delay(settings.delay).fadeIn(settings.speed); 
}).bind("mouseleave", function() { 
    $(this).removeClass('active'); 
    $(this).children(".dropdown, .megamenu").stop(true, true).delay(settings.hideDelay).fadeOut(settings.speed); 
});

Demo

Вы можете достичь того же эффекта (для megamenu/dropdown) без использования JavaScript, и поэтому я рекомендую вам реорганизовать ваш код, чтобы использовать CSS.

источник

2015-04-09 15:36:02 enyce12

Вы можете использовать элемент :after псевдо так:

.jetmenu > li:hover:after{ 
    content:""; 
    position:relative; 
    display:block; 
    width:100%; 
    height:1px; 
    background: #FFF; 
    z-index:1000; 
}

Вы можете изменить белый фон, чтобы соответствовать вашему элементу меню фона, но в вашем случае это white

jsbin

источник

2015-04-09 15:41:30

здесь является только css:

.fix-sub a{position: relative;} 
.fix-sub:hover::before { 
    content:""; 
    top:50px; 
    position: absolute; 
    background:#fff; 
    height:2px; 
    width:121px; 
    display:inline; 
    z-index: 99999; 
} 
.megamenu { 
    z-index: 0!important; 
}

http://jsbin.com/resutunuxa/2/

источник

2015-04-09 15:42:10 madalinivascu

Скрыть часть границы в меню ul/li

ответ

Смежные вопросы