CSS下拉菜單顯示問題

Question

我正在一個項目上工作，我被分配顯示一個嵌套的菜單，我的意思是下拉菜單，但我不知道我在這裏做錯了什麼。誰能幫我嗎 ？

HTML

<div id="nav"> 
      <ul> 
       <li><a href="#">Menu Num 1</a></li> 
       <li><a href="#">Menu Num 2</a> 
        <ul> 
         <li><a href="#">Sub Menu 2.1</a></li> 
         <li><a href="#">Sub Menu 2.2</a></li> 
         <li><a href="#">Sub Menu 2.3</a> 
          <ul> 
           <li><a href="#">Sub Sub Menu 2.3.1</a></li> 
           <li><a href="#">Sub Sub Menu 2.3.2</a></li> 
           <li><a href="#">Sub Sub Menu 2.3.3</a></li> 
           <li><a href="#">Sub Sub Menu 2.3.4</a></li> 
          </ul> 
         </li> 
         <li><a href="#">Sub Menu 2.4</a></li> 
        </ul> 
       </li> 
       <li><a href="#">Menu Num 3</a></li> 
       <li><a href="#">Menu Num 4</a></li> 
      </ul> 
     </div> 

CSS

* { 
    margin: 0px; 
    padding: 0px; 
} 
#nav ul { 
    list-style-type: none; 
    font-size: 0px; 
} 
#nav ul li { 
    display: inline-block; 
    position: relative; 
} 
#nav ul li a { 
    padding: 10px; 
    display: block; 
    font-size: 12px; 
    text-decoration: none; 
    font-family: sans-serif; 
    border: 1px solid #008080; 
    margin: 5px; 
} 
#nav ul li a:hover { 
    background: #a1a1a1; 
} 
#nav ul ul { 
    display: none; 
} 
#nav ul li:hover > ul { 
    position: absolute; 
    display: block; 
    width: 100%; 
} 

我唯一的問題是li項目不正確每個家長裏下顯示。我需要一個解決方案和進一步的代碼檢查，我有一個jsFiddle鏈接。

Answer 1

嘗試添加顯示：塊;你的頂級懸停類

#nav ul li a:hover { 
    background: #a1a1a1; 
    display:block; 
} 

我碰到這個來給你

Answer 2

我有你的問題的解決方案可能是有用的。你必須做在你的CSS表的一些變化。我添加新的內容在CSS表格，它可以幫助你解決你的問題。

* { 
margin: 0px; 
padding: 0px;} 
#nav ul { 
list-style-type: none; 
font-size: 0px; 
} 
#nav ul li { 
display: inline-block; 
position: relative; 
} 
#nav ul li a { 
padding: 10px; 
display: block; 
font-size: 12px; 
text-decoration: none; 
font-family: sans-serif; 
border: 1px solid #008080; 
margin: 5px; 
} 
#nav ul li a:hover { 
background: #a1a1a1; 
} 
#nav ul ul { 
display: none; 
} 
#nav ul li:hover > ul{ 
position: absolute; 
display: block; 
width: 100%; 
} 
#nav ul ul li:hover > ul{ 
position: absolute; 
margin-left:100px; 
top:0px; 
display: block; 
width: 100%;)/* CSS Document */