html - CSS 菜单不显示子项

Question

我有一个菜单的 CSS 代码:

/** CUSTOMER MENU **/
#CustomerMenu {
    margin-bottom:10px;
}
#CustomerMenu ul {
    padding: 0;
    margin:0 auto 0 auto;
    list-style-type: none;
    text-align: center;
    display:inline;
}
#CustomerMenu ul li {
    display: inline;
}
#CustomerMenu ul li a {
    text-decoration: none;
    padding: 10px;
    color: #FFFFFF;
    background-color: #666666;
}
#CustomerMenu ul li a:hover {
    color: #fff;
    background-color: #f36f25;
}
/** CUSTOMER MENU **/

但它没有显示子元素 - 下面的 fiddle :

http://jsfiddle.net/dvborqgm/

Answer 1

这是一个快速修复:http://jsfiddle.net/0781wtqu/基本上，向子菜单添加一个类(在我的示例中为“submenu”)并通过 CSS 规则将其隐藏，然后添加另一个 CSS 规则以在悬停时显示隐藏的类

#CustomerMenu ul li:hover > ul.submenu {
显示: block ；
}