Vertical navigation with fluid horizontal sub menu

问题

I'd like to build a vertical navigation. It's a bit special because the sub navigation should be displayed right next to the main links and should be fluid like this:

 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

I'm looking for a solution to make the sub menu fluid, so that the elements stays in the main menu row and breaks dynamically. How to break the sub list items like in the example above?

fiddle

回答1:

Is this what you're looking for? 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;
}

来源：https://stackoverflow.com/questions/29330616/vertical-navigation-with-fluid-horizontal-sub-menu