html - 更改下 zipper 接和父链接的颜色？

Question

我试图在悬停子链接时突出​​显示“个人培训”链接和任何其他下 zipper 接。

例如:用户将鼠标悬停在“个人培训”链接上，然后显示下拉菜单。然后，当他在列表下方时，“个人培训”仍然突出显示。

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;
}

我显示下拉菜单的代码有效，它突出显示悬停的任何单个元素我需要的是如何突出显示下 zipper 接及其父链接。

提前致谢，Slulego

Answer 1

由于子菜单是包含在菜单标题 li 中的 ul，因此您应该将 :hover 样式应用到 li，而不是 a。在此 JSFiddle 中查看实际效果.

我将 CSS 选择器 #nav a:hover 更改为 #nav > li:hover。

而且，虽然无需多言，但 JSFiddle 的美学远非最佳；我只是把它拼凑在一起来展示我在说什么:)