CSS3 - 下拉菜单悬停

Question

我创建了一个下拉菜单，现在我想悬停主菜单点，但主菜单下面的列表（“下拉列表”）没有。我可以给我的ul和li一个班来解决这个问题，但是有更顺畅或更清洁的方法吗？

我感谢每一条评论！

编辑 - CSS代码：

#mainnav li ul:not:hover {
    none !important;
}

#mainnav ul li a:hover {
    background-color: #ff4040;
}

所以悬停确实有效，但它包括所有ul和li

Answer 1

您应该使用> child selector

#mainnav li ul{
    display:none;
}
#mainnav li:hover > ul{
    display:block;
}
#mainnav ul li a:hover {
    background-color: #ff4040;
}

因此，您将ul设置为默认隐藏（第一条规则），当您将鼠标悬停在li上时，只覆盖其ul个孩子（ <而不是更深）将显示。