基于没有类的无序列表的CSS菜单

Question

我想知道是否有可能为下面提到的菜单结构设计一个只基于css的多级菜单。在cssmenumaker.com上，可以看到几个例子和菜单，其中有2-3级子菜单，他们通常添加一个类似于has-submenu的类。

我们是否可以使用子菜单上的任何类来完成它，并且只从css管理它。

就像这样

.nav ul {}
.nav ul ul {}
.nav ul li{}....


<ul class="nav">
    <li><a href="#">Home</a>

    </li>
    <li><a href="#">about us</a>

    </li>
    <li><a href="#">News</a>

    </li>
    <li><a href="#">Gallery</a>

        <ul>
            <li><a href="#">Image Gallery</a>

            </li>
            <li><a href="#">Video Gallery</a>

            </li>
        </ul>
    </li>
    <li><a href="#">Contact</a>

    </li>
</ul>

小提琴上的例子有基于cssmenu.com的例子，也有http://jsfiddle.net/zo61z9sw/的例子

http://cssmenumaker.com

或者，我们必须使用任何类型的jquery，它也可以处理多级菜单。

Answer 1

原则上，这是因为子菜单ul嵌套在li中，所以：

• 默认情况下，将子菜单ul设置为display: none;
• 当父li悬停时，将子ul设置为display: block;。这是通过li:hover > ul完成的，>将确保只对li立即执行ul。

在这种情况下，.has-sub实例并不是真正需要的，因为可以对所有li执行相同的检查，并且只有在找到子ul时才会执行任何操作。

CSS:

/*CSS for menu without subclasses*/
#testmenu {
    border-radius: 5px;
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.15);
    background: linear-gradient(to bottom, #f2edea 0%, #c0bebf 100%);
    font-weight: 600;
    height: 52px;
    width: auto;
    margin-bottom: 100px;
}
 #testmenu ul, #testmenu li, #testmenu span, #testmenu a {
    border: 0;
    margin: 0;
    padding: 0;
    position: relative;
}
#testmenu:after, #testmenu ul:after {
    content:'';
    display: block;
    clear: both;
}
#testmenu a {
    box-shadow: inset 0 1px 0 whitesmoke;
    background: linear-gradient(to bottom, #f2edea 0%, #c0bebf 100%);
    color: #666666;
    display: inline-block;
    font-family: Arial, Verdana, sans-serif;
    font-size: 12px;
    line-height: 52px;
    padding: 0 28px;
    text-decoration: none;
}
#testmenu ul {
    list-style: none;
    box-shadow: inset 0 1px 0 whitesmoke;
}
#testmenu > ul > li {
    float: left;
}
#testmenu > ul > li:first-child a {
    border-radius: 5px 0 0 5px;
}
#testmenu > ul > li:hover > a {
    box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.15);
    color: white;
    background: linear-gradient(to bottom, #4a5662 0%, #606f7f 100%);
}
#testmenu ul > li:hover > ul {
    display: block;
}
#testmenu ul > li ul {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    display: none;
    position: absolute;
    width: 200px;
    top: 100%;
    left: 0;
}
#testmenu ul > li ul li a {
    background: #606f7f;
    border-bottom: 1px solid #59636f;
    border-bottom: 1px solid #556371;
    box-shadow: inset 0 1px 0 #606f7f;
    color: white;
    display: block;
    line-height: 160%;
    padding: 15px 10px;
    font-size: 12px;
}
#testmenu ul > li ul li:hover a {
    background: #4a5662;
    box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.15);
}
#testmenu ul > li li:hover > ul {
    display: block;
}
#testmenu ul > li li ul {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
}
#testmenu ul > li li ul li a {
    background: #606f7f;
    box-shadow: none;
}
#testmenu ul > li li ul li a:hover {
    background: #4a5662;
    box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.15);
}

我已经删除了一些供应商前缀以缩短代码，但是这个CSS可能可以被优化以删除/合并一些样式。

JS Fiddle: http://jsfiddle.net/x9fmzc82/