Ul li：hover Unstable Look

Question

ul li:hoverで問題が発生します。

誰も私の解決に役立つことができますか？

View fiddle on Plunker：http://plnkr.co/edit/4RDyOkZCFRWnuu42yAsm?p=preview

#access { 
 
    border-bottom: 10px #be1e2d solid; 
 
    width: 100%; 
 
    height: 50px 
 
} 
 

 
.menu-main-menu-container { 
 
    overflow: hidden; 
 
    float: left; 
 
} 
 

 
.menu-main-menu-container ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    list-style: none; 
 
} 
 

 
.menu-main-menu-container li { 
 
    display: inline; 
 
    margin: 0 2px 0 0; 
 
    padding: 0; 
 
    text-transform: uppercase; 
 
} 
 

 
.menu-main-menu-container li a { 
 
    float: left !important; 
 
    color: #333; 
 
    display: block; 
 
    font-size: 14px; 
 
    padding: 17px; 
 
    position: relative; 
 
    text-decoration: none; 
 
    z-index: 999; 
 
} 
 

 
.menu-main-menu-container li a:hover { 
 
    background: url(images/menu-arrow.png) bottom center no-repeat; 
 
} 
 

 

 
/* Sub level menus*/ 
 
.menu li:hover > ul { 
 
    visibility: visible; 
 
} 
 

 
.menu-main-menu-container ul li ul { 
 
    position: absolute; 
 
    z-index: 1001; 
 
    left: 0; 
 
    top: 65px; 
 
    background: #771214; 
 
    /*sub menu background color */ 
 
    visibility: hidden; 
 
} 
 

 

 
/* Sub level menu links style */ 
 
.menu-main-menu-container ul li ul li a { 
 
    color: #fff; 
 
    font-size: 12px; 
 
    padding: 6px; 
 
    padding-right: 8px; 
 
    margin: 0; 
 
    background: #771214; 
 
    /*sub menu background color */ 
 
} 
 

 
.menu-main-menu-container ul li ul li a:hover { 
 
    /*sub menu links' background color onMouseover. Add rounded edges in capable browsers */ 
 
    background: #be1e2d; 
 
}

<div id="access"> 
 
    <div id="main-menu"> 
 
    <div class="menu-main-menu-container"> 
 
     <ul id="menu-main-menu" class="menu"> 
 
     <li id="menu-item-79" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-79"><a href="http://localhost/pecimerah/">Home</a></li> 
 
     <li id="menu-item-84" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-84"><a href="http://localhost/pecimerah/rubrik/pernak-pernik">Category</a> 
 
      <ul class="sub-menu"> 
 
      <li id="menu-item-87" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-87"><a href="http://localhost/pecimerah/rubrik/pernak-pernik/gaya">Sub Menu 1</a></li> 
 
      <li id="menu-item-88" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-88"><a href="http://localhost/pecimerah/rubrik/pernak-pernik/jajanan">Sub Menu 2</a></li> 
 
      <li id="menu-item-89" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-89"><a href="http://localhost/pecimerah/rubrik/pernak-pernik/resensi">Sub Menu 3</a></li> 
 
      <li id="menu-item-90" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-90"><a href="http://localhost/pecimerah/rubrik/pernak-pernik/resep">Sub Menu 4</a></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

織り：http://kodeweave.sourceforge.net/editor/#441c4f1050ed7fa1fe7d91a1c96be28a

あなたの質問は、あなたの望まれる効果の目標に正確に明確ではありません。

私は、categoryの上にカーソルを置いて、サブメニューをクリックすることなくフェードアウトすることができます。ここで

あなたは簡単な修正、変更を行く...

​​

トップ

.menu-main-menu-container ul li ul { 
    top: 50px; 
} 

#access { 
 
    border-bottom: 10px #be1e2d solid; 
 
    width: 100%; 
 
    height: 50px 
 
} 
 

 
.menu-main-menu-container { 
 
    overflow: hidden; 
 
    float: left; 
 
} 
 

 
.menu-main-menu-container ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    list-style: none; 
 
} 
 

 
.menu-main-menu-container li { 
 
    display: inline; 
 
    margin: 0 2px 0 0; 
 
    padding: 0; 
 
    text-transform: uppercase; 
 
} 
 

 
.menu-main-menu-container li a { 
 
    float: left !important; 
 
    color: #333; 
 
    display: block; 
 
    font-size: 14px; 
 
    padding: 17px; 
 
    position: relative; 
 
    text-decoration: none; 
 
    z-index: 999; 
 
} 
 

 
.menu-main-menu-container li a:hover { 
 
    background: url(images/menu-arrow.png) bottom center no-repeat; 
 
} 
 

 

 
/* Sub level menus*/ 
 
.menu li:hover > ul { 
 
    visibility: visible; 
 
} 
 

 
.menu-main-menu-container ul li ul { 
 
    position: absolute; 
 
    z-index: 1001; 
 
    left: 0; 
 
    top: 50px; 
 
    background: #771214; 
 
    /*sub menu background color */ 
 
    visibility: hidden; 
 
} 
 

 

 
/* Sub level menu links style */ 
 
.menu-main-menu-container ul li ul li a { 
 
    color: #fff; 
 
    font-size: 12px; 
 
    padding: 6px; 
 
    padding-right: 8px; 
 
    margin: 0; 
 
    background: #771214; 
 
    /*sub menu background color */ 
 
} 
 

 
.menu-main-menu-container ul li ul li a:hover { 
 
    /*sub menu links' background color onMouseover. Add rounded edges in capable browsers */ 
 
    background: #be1e2d; 
 
}

<div id="access"> 
 
    <div id="main-menu"> 
 
    <div class="menu-main-menu-container"> 
 
     <ul id="menu-main-menu" class="menu"> 
 
     <li id="menu-item-79" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-79"><a href="http://localhost/pecimerah/">Home</a></li> 
 
     <li id="menu-item-84" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-84"><a href="http://localhost/pecimerah/rubrik/pernak-pernik">Category</a> 
 
      <ul class="sub-menu"> 
 
      <li id="menu-item-87" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-87"><a href="http://localhost/pecimerah/rubrik/pernak-pernik/gaya">Sub Menu 1</a></li> 
 
      <li id="menu-item-88" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-88"><a href="http://localhost/pecimerah/rubrik/pernak-pernik/jajanan">Sub Menu 2</a></li> 
 
      <li id="menu-item-89" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-89"><a href="http://localhost/pecimerah/rubrik/pernak-pernik/resensi">Sub Menu 3</a></li> 
 
      <li id="menu-item-90" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-90"><a href="http://localhost/pecimerah/rubrik/pernak-pernik/resep">Sub Menu 4</a></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>