html - 无法使 CSS 下拉菜单显示在其父级下方？

Question

我有这样的菜单

<nav id="nav">
 <ul>
  <li>Home</li>
  <li>Menu1
   <ul>
    <li>Sub1</li>
    <li>Sub2</li>
   </ul>
  </li>
  <li>Menu2
   <ul>
    <li>Sub1</li>
    <li>Sub2</li>
   </ul>
  </li>
 </ul>
</nav>

我的CSS文件是这样的

#nav ul li {
    display: inline;
}
#nav ul ul {
    display: none;  
}
#nav ul li:hover > ul {
    display: block;
    position: absolute;
}
#nav ul ul li {
    display: block; 
}

子菜单项下拉看起来很好，只是它们在第一个列表项 Home 下下拉。

我怎样才能让他们下拉到他们所在的父列表项下？

Answer 1

这是一个有效解决方案的 fiddle :http://jsbin.com/akazev/2/edit

看看新的 CSS:

nav ul li {
    display:  block;
    float: left;
}
nav ul ul {
    display: none;  
}
nav ul li:hover > ul {
    display: block;
    position: absolute;
    margin-left: -30px;
}
nav ul ul li {
    display: block; 
    float: none;
}

与其将第一级链接显示为内联，不如将它们显示为内联 block 或 float 。这就是导航系统的问题。如果你使用 float (像我一样)，不要忘记将更深层次的链接设置为 float: none .您还必须为绝对定位的 ul 设置一个 margin-left。

PS:不是<nav id="nav">有点无意义？