无法让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

这是一个工作解决方案的小提琴: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;
}

而不是将第一级链接显示为内联,而是将它们显示为内联块或浮点数.这就是导航的错误.如果你使用float(就像我一样),不要忘记设置更深层次的链接float: none.你还必须为绝对定位的ul设置一个margin-left.

PS:<nav id="nav">有点没有意义吗？