垂直导航，水平方向有子菜单 [英] 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?

小提琴

推荐答案

这是您要找的东西吗? https://jsfiddle.net/u4zpdpg7/11/

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

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