ネストされた要素をスタイルするための適切な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セレクターでより具体的にする必要があります。例えば

：このhttp://jsfiddle.net/tMND4/5/

Answer 2

：

.active { 
    color:#FFF; 
} 

あなたが適用されるため：

.dropdown li a{ 
    color:#666; 
} 

この切り札ここ

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

はあなたのフィドルです！これはそれを修正することがラッピングLIではなく、A.

から：！それは `使用しなくても動作しないでしょう

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