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

由于子菜单是菜单标题ul中包含的li，因此您应该将:hover样式应用于li，而不是a }。请参阅此JSFiddle中的实际操作。

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

而且，虽然不必说，但JSFiddle的美学远非最佳;我只是将它一起砍掉以显示我在说什么：）

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

1 个答案: