带有css的双线菜单

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

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

有没有一种方法可以不使用position:absolute，而使菜单容器位于文档流中（没有间隙，因为子菜单不存在）？

检查，我认为它与您想要的类似

编辑：抱歉，错过了css唯一的想法，下面是我要做的：

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

我已经为这件事建立了一个新的计划

如果我理解正确，您需要一个两行菜单，其子菜单仍在文档流中，因此当没有子菜单时，页面将进行调整

问题是：如果没有

位置：绝对

，父

元素将展开以包含子菜单

元素。这将使顶级菜单项的间距变为奇数，具体取决于子菜单元素的宽度

---

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

使用以下更新的CSS。它将完美地工作

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

---

你玩过css代码吗？我想他不想要悬停式下拉菜单。我想他正在寻找一个存在时总是显示的子菜单。你能发布一个工作方式错误的版本，或者使用绝对位置吗？我显然不理解这个问题，谢谢，但是这个间距确实是个问题。那么，你想要等间距的顶级元素，而不管第二级元素的内容是什么？如果是这样的话，我的问题是“当第二级元素一起运行时会发生什么？”它并不完美，在第一行中仍然存在这些可怕的差距。我不认为绝对位置能解决这个问题。

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