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 Ite

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