更改下拉鍊接和父鏈接的顏色？

Question

我試圖突出顯示「個人訓練」鏈接和任何其他下拉鍊接時，一個子鏈接懸停。

例如：用戶懸停「個人訓練」鏈接，然後下拉菜單顯示。然後，當他在名單上時，「個人訓練」仍然突出。

HTML：

<ul id="nav"> 
     <li><a href="index.php">Home</a></li> 
     <li><a href="personaltraining.php">Personal Training</a> 
      <ul> 
       <li><a href="signup.php">Sign Up</a></li> 
       <li><a href="meetthetrainers.php">Meet The Trainers</a></li> 
      </ul> 
     </li> 
    </ul> 

CSS：

#header a { 
    margin: 0px; 
    padding: 10px; 
    display: block; 
    text-decoration: none; 
    font-size: 20px; 
    font-weight: bold; 
    color: #000; 
} 
#nav a:hover { 
    margin: 0px; 
    padding: 10px; 
    display: block; 
    text-decoration: none; 
    font-weight: bold; 
    color: #000; 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, #FFF), color-stop(1, #00F)); 
} 
#nav li ul { 
    width: auto; 
    position: absolute; 
    display: none; 
    background-color: #0F0; 
    background-image: none; 
} 
#nav ul li:hover { 
    width: auto; 
    position: absolute; 
    background-color: #00F; 
    background-image: none; 
} 
#nav ul a:hover { 
    background-color: #00F; 
    background-image: none; 
} 
#nav li a:hover + a { 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, #FFF), color-stop(1, #00F)); 
} 
#nav li:hover ul { 
    display: block; 
} 

我顯示的下拉菜單中的作品，它強調了懸停所有我需要的是如何突出一個下拉鍊接任何單個項目的代碼和它的父母鏈接。

由於提前，Slulego

Answer 1

由於子是包含在你的菜單頭li一個ul，你應該應用:hover造型到li，而不是a。在此JSFiddle中查看它的行動。

我將CSS選擇器#nav a:hover更改爲#nav > li:hover。

而且，雖然不需要說，但JSFiddle的美學遠非最佳;我只是一起砍了，以顯示我在說什麼:)