css - CSS 菜单和子菜单覆盖样式

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

使用子选择器。它只选择直接的孩子，而不是所有的后代。

例如：

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

每个现代浏览器以及 IE >= 7都支持它。