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 */