正确的CSS风格的嵌套元素

Question

我正在CSS下拉菜单。我希望能够添加一个类active列出我的下拉列表中的元素，以显示特定项目是当前选择。问题是，我无法改变文字颜色。背景呢，而不是文字...

演示：http://jsfiddle.net/tMND4/4/

HTML：

<ul class="dropdown"> 
    <li> 
     <a href="#">Nice test items</a> 
     <ul class="submenu"> 
       <li><a href="#">Sonic Screwdriver</a></li> 
       <li class="active"><a href="#">TARDIS</a></li> 
       <li><a href="#">Long Scarf</a></li> 
     </ul> 
    </li> 
</ul> 

CSS：

body{ 
    padding:10px; 
} 

.dropdown > li{ 
    width:200px; /*or anything you want!*/ 
    color:#333; 
    text-decoration:none; 
    padding:2px; /*all things wont stick to the side */ 
} 

.dropdown li a{ 
    display:block; 
    color:#666; 
    text-decoration:none; 
    padding:5px; /*line it up with sublinks */ 
} 

.dropdown li .submenu{ 
    display:none; /*hide submenu*/ 
} 
/* child selector to prevent style propagation*/ 
.dropdown > li:hover{ 
    border:1px solid #666; 
} 

/* child selector to prevent style propagation*/ 
.dropdown > li:hover a { 
    padding: 4px; /*reduced padding to compensate for border*/ 
} 

.dropdown li:hover .submenu{ 
    display:block; /*display submenu*/ 
} 

.dropdown li:hover .submenu a{ 
    display:block; 
    padding:5px; /*line it up with links */ 
} 

.dropdown li:hover .submenu a:hover{ 
    background: #DDD; 
} 

.active{ 
    background:#666; 
    color:#FFF; 
} 

Answer 1

这是由于特异性。您必须对您的.active选择器更具体。

例如：

.dropdown li.active a { 
    background:#666; 
    color:#FFF; 
} 

这是你的提琴：http://jsfiddle.net/tMND4/5/

Answer 2

此：

.dropdown li a{ 
    color:#666; 
} 

胜过这一点：

.active { 
    color:#FFF; 
} 

因为你申请active到包装LI而非A.

这可以修复它！

.dropdown li.active a { 
    color:#FFF; 
}