jquery - 如何在一行中使用水平子菜单构建垂直导航？

我必须建立一个垂直导航。这有点特殊，因为应该通过单击以下主链接，将子导航显示在同一行中主链接的旁边：

 Item 1
 Item 2   Subitem 1 | Subitem 2
 Item 3
 Item 4   Subitem 1 | Subitem 2
 Item 5

它可以按预期工作，但是如果主链接具有子菜单，则主链接将显示在子菜单之后，而不是之前显示。我想对float:left;使用.sub-menu将它们都放在同一行是有意义的。但是与此类似：

 Item 1
 Subitem 1 | Subitem 2    Item 2
 Item 3
 Subitem 1 | Subitem 2    Item 4
 Item 5

这是fiddle。任何帮助，将不胜感激。

最佳答案

您只需要将顶级菜单li中的left元素以及.sub-menu中的元素浮动：

ul > li > a {
    float: left;
    clear: both;
}
.sub-menu {
    display: none;
    float: left;
}
.sub-menu li {
    float: left;
}

Updated fiddle

关于jquery - 如何在一行中使用水平子菜单构建垂直导航？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27064733/