垂直导航与流体水平子菜单

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;
}