带css的2行菜单

Question

它可能很容易实现，但很难命名。我正在努力展示这种布局：

<ul class='menu'>
  <li>
    <a>item1</a>
    <ul class='submenu'> ... </ul>
  <li>
  <li><a>item2</a></li>
</ul>

以2条水平线排列：第一行是ul.menu，第二行是ul.submenu

的CSS：

ul.menu
{
  position: relative;
  height: 20px;
}
ul.menu li {
  display: inline;
}
ul.submenu {
  top: 20px;
  left: 0px;
  position: absolute;
}

有没有办法没有位置：绝对，所以菜单容器在文档的流程中（没有空隙，子菜单不存在）？

Answer 1

检查my answer here，我认为它与您想要的类似。

编辑：对不起，错过了css唯一的想法，这就是我要做的事情：

.submenu{ display:none;}
li:hover .submenu{ display: block;}

Answer 2

我为此设置了jsFiddle。

如果我正确理解了问题，你需要一个双线菜单，其子菜单仍在文档流程中，所以当没有子菜单时页面会调整。

问题是：如果没有position: absolute，则父<li>元素将展开以包含子菜单<ul>元素。这将使您的顶级菜单项具有奇数间距，具体取决于子菜单元素的宽度。

如果这不是问题，那么上面的jsFiddle应该解决这个问题。如果这是一个问题，那么还有一些工作要做（我还没有解决方案）。

Answer 3

使用以下更新的CSS。它会很完美。

ul.menu {
    height: 20px;
}
ul.menu li {
    display: inline;
    float:left;
}
ul.submenu {
    display:block;
    margin:0px;
    padding:0px;
}