带流体水平子菜单的垂直导航 [英] Vertical navigation with fluid horizonal 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

推荐答案

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

这篇关于带流体水平子菜单的垂直导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！