更改下拉链接和父链接的颜色？

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的美学远非最佳;我只是一起砍了，以显示我在说什么:)