Question

如何确保子菜单不使用主菜单中的任何样式？我正在使用的似乎是继续从.nav-left li.link a和.nav-left li.link a：hover获取样式。

#nav {position:relative; width:960px;}
#nav .nav-left, .nav-right {position:relative;}
#nav .nav-left ul, .nav-right ul {margin:0; padding:0;}
#nav .nav-left li, .nav-right li {float:left; position:relative; list-style:none;}
#nav .nav-left li.logo a {position:static;}
#nav .nav-left li.item, .nav-right li.item {position:relative;}
#nav .nav-left li.link a, .nav-right li.link a {}
#nav .nav-left li.link a:hover, .nav-right li.link a:hover {}
#nav .nav-left li:hover a {}
#nav .nav-left li.active a, .nav-right li.active a {}
#nav .nav-left li.active a:hover, .nav-right li.active a:hover {}
#nav .nav-left li.first, .nav-right li.first {}
#nav .nav-left li.last, .nav-right li.last {}
#nav .nav-left ul li:hover .submenu {left:0; top:auto;}
#nav .sub-menu {position:absolute; left:-999em; width:200px;}
#nav .sub-menu ul {}
#nav .sub-menu li {display:block; position:relative; width:200px; list-style:none;}
#nav .sub-menu li a {}
#nav .sub-menu li a:hover {}

Answer 1

利用child selector。它只选择直接的孩子，而不是所有后代。

例如：

 .nav-left > ul {} /* only matches if ul is direct child of .nav-left */

在每个现代浏览器中都是supported，IE＆gt; = 7。

CSS菜单和子菜单覆盖样式

1 个答案: