0

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

例如：用户悬停“个人培训”链接，然后显示下拉菜单。然后，当他从列表中删除时，“个人训练”仍然突出显示。

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

4

1 回答 1

0

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

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

而且，尽管不用说，JSFiddle 的美学远非最佳；我只是将它破解在一起以显示我在说什么:)

于 2012-11-07T18:26:21.030 回答