CSSメニュー - 親ノードのアクティブなリンクで、フォーカスが子ノードにあるときに色が変化する

Question

CSSの垂直メニューがあります。作成したコードは以下のとおりです。 （テストページはhttp://www.candyundies.com/test.phpにあります）。

私の問題は、親メニューのハイライト表示された「li」が非ホバーカラー（＃297BCE）に戻って変化していることです。私は白いままにしたいと思っています（＃FFF）あなたが動かすときのようです。私は間違っていることを見つけようと夢中になってきました。私は何が欠けているすべてのアイデア？

<style> 
#categories { 
background-color:#297BCE; 
width:214px; 
height:37px; 
    -moz-border-radius-topright: 8px; 
    border-top-right-radius: 8px; 
    -moz-border-radius-topleft: 8px; 
    border-top-left-radius: 8px; 
    position:absolute; 
    top:67px; 
    padding-top:10px; 
    z-index:3; 
    font: bold 15px Arial, sans-serif; color:#FFFFFF; 
} 
#navigation { position:absolute;font-size:0.75em; width:214px;top:115px;} 
#navigation ul {margin:0px; padding:0px;} 
#navigation li {list-style: none;} 
/* FIRST LEVEL TEXT/BACKGROUND/BORDER SETTINGS */ 
ul.top-level {background:#fff;} 
ul.top-level li { 
font-family: arial, sans-serif; 
font-size:14px; 
font-weight:bold; 
border:1px solid #D2D2D2; border-color:#fff #A5A5A5 #A5A5A5 #A5A5A5; 
background:#fff url(images/arrow.gif) no-repeat center right; 
} 
/* FIRST LEVEL TEXT COLOR */ 
#navigation a { 
display:block; 
color: #297BCE; 
cursor: pointer; 
line-height: 25px; 
text-indent: 10px; 
text-decoration:none; 
width:214px; 
} 
/* FIRST LEVEL TEXT HOVER COLOR */ 
#navigation a:hover{ 
color: #FFF; 
text-decoration:none; 
} 
/* FIRST LEVEL HOVER BACKGROUND COLOR */ 
#navigation li:hover { 
background-color:#297BCE; 
position: relative; 
} 
#navigation li{ 
background-color:#FFF; 
position: relative; 
} 
/* SECOND LEVEL TEXT SETTINGS */ 
ul.sub-level li a{ 
    font-family: arial, sans-serif; 
    font-size:12px; 
    font-weight:normal; 
    background-color:#FFF; 
} 
ul.sub-level { 
    display: none; 
} 
li:hover .sub-level { 
    position: absolute; 
    display: block; 
    background: #FFF; 
    border: #A5A5A5 solid; 
    border-width: 1px; 
/* set the sub menu flyout position here */ 
    left: 207px; 
    top: -15px; 
    z-index:10; 
} 
/* SECOND LEVEL TEXT HOVER COLOR */ 
#navigation ul li ul li a:hover{ 
color:#f90; 
background-color:#FFF; 
text-decoration:underline; 
} 
#navigation ul ul{ 
    padding-top:5px; 
    padding-bottom:5px; 
    border-radius: 8px; 
    -moz-border-radius: 8px; 
    -webkit-border-radius: 8px; 
    box-shadow: 0px 3px 10px #B0B0B0; 
} 
#navigation ul li ul li a{ 
text-indent: 20px; 
line-height: 17px; 
} 
ul.sub-level li { 
    background:#fff; 
    border:1px solid #D2D2D2; 
    border-color:#FFF #FFF #FFF #FFF; 
    float:left; 
} 
</style> 

<div id="categories">See All Categories</div> 
<div id="navigation"> 
    <ul class="top-level"> 
     <li><a href="#">Home</a> 
      <ul class="sub-level"> 
       <li><a href="#">Sub Menu Item 1</a></li> 
       <li><a href="#">Sub Menu Item 2</a></li> 
       <li><a href="#">Sub Menu Item 3</a></li> 
       <li><a href="#">Sub Menu Item 3</a></li> 
      </ul> 
     </li> 
     <li> 
      <a href="#">FAQ</a> 
      <ul class="sub-level"> 
       <li><a href="#">Sub Menu Item 1</a></li> 
       <li><a href="#">Sub Menu Item 3</a></li> 
      </ul> 
     </li> 
     <li> 
      <a href="#">News</a> 
      <ul class="sub-level"> 
       <li><a href="#">Sub Menu Item 1</a></li> 
       <li><a href="#">Sub Menu Item 2</a></li> 
       <li><a href="#">Sub Menu Item 3</a></li> 
      </ul> 
     </li> 
    </ul> 
</div> 
</div> 

Answer 1

第1レベルliが表示されているときは、直下の子リンクのみに白色を適用する必要があります。だから、

があなたのCSSに、この宣言を追加し、子セレクタの構文を（>）を使用します

#navigation li:hover > a{ 
    color:#fff; 
} 

参照：実装の http://jsfiddle.net/MVKLC/