隱藏一些列表條目的CSS/HTML拖放菜單

Question

我正在處理HTML/CSS下拉菜單，現在只要將鼠標懸停在菜單頂部，並非每個條目都顯示在放置菜單中。最高的一兩個條目總是缺失。這是我的HTML：

<!-- Navigation Bar --> 
    <ul id="navi"> 
     <li><a href="">Engines</a> 
      <ul> 
       <li><a href="">DiniJS</a></li> 
       <li><a href="">Foxen2D</a></li> 
       <li><a href="">Vivon3D</a></li> 
      </ul> 
     </li> 
     <li><a href="">Team</a> 
      <ul> 
       <li><a href="">Rob Myers</a></li> 
       <li><a href="">Nate Mast</a></li> 
      </ul> 
     </li> 
     <li><a href="">Contact</a> 
      <ul> 
       <li><a href="">Email</a></li> 
       <li><a href="">Twitter</a></li> 
      </ul> 
     </li> 
    </ul> 

這裏是CSS：

#navi ul { 
    list-style:none; 
    margin:0px; 
    padding:0px; 
} 

#navi li { 
    float:left; 
    width:120px; 
    padding-top: 13px; 
    padding-bottom:8px; 
    background-color:black; 
    text-align:center; 
    font-family:"Courier New"; 
} 

#navi li:hover { 
    background-color:#303030; 
} 

#navi li ul li { 
    float:none; 
    width:116px; 
    text-align:left; 
    padding-left:4px; 
    border-top:1px solid #303030; 
    display:none; 
    font-size:85%; 
    position:absolute; 
    z-index:2; 
} 

#navi li:hover ul li { 
    display:block; 
} 

#navi a { 
    text-decoration:none; 
    color:red; 
} 

我願意接受任何JavaScript或JQuery的建議，如果這是一種更好的方式去修復這一點。謝謝。

Answer 1

你的問題是，所有的子菜單項是堆疊在另一個之上。只需將position: absolute;從#navi li ul li區塊移至新的#navi li ul區塊即可解決此問題。

Answer 2

使用嵌套列表項目時。使用類名來定位。爲你的菜單使用class =「sub」 作爲子菜單（ul），並設置顯示none和絕對的sub ul而不是li。