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

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

你只需要浮在.sub-menu在顶层菜单left的li元素，以及那些：

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

Updated fiddle