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

Question

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

 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。任何帮助将不胜感激。

Answer 1

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

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

Updated fiddle