Ul li：懸停不穩定的外觀

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>