Вертикальная навигация с подменю жидких горизонтов

Question

Я хотел бы построить вертикальную навигацию. Это немного особенным, потому что суб навигации должны отображаться в непосредственной близости от основных звеньев и должна быть жидкой так:

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

Я ищу решение, чтобы сделать субменю жидкость, так что элементы остаются в строке главного меню и динамически разбиваются. Как разбить элементы подписок, как в приведенном выше примере?

fiddle

Answer 1

Это то, что вы ищете? https://jsfiddle.net/u4zpdpg7/11/

ul > li > a { 
    float: left; 
    clear: both; 
} 

ul > li:hover > .sub-menu{ 
    display: block; 
} 

.sub-menu { 
    display: none; 
    float: left; 
    padding-left: 10px; 
} 

.sub-menu li { 
    float: left; 
    padding-left: 10px; 
} 

.sub-menu li:first-child{ 
    border-left: 2px solid #333; 
}