如何在一行中使用水平子菜單構建垂直導航？

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