Question

I’m trying to highlight the “Personal Training” link and any other drop down links when a child link is hovered.

For example: The user hovers the “Personal training” link then the dropdown menu shows. Then while he down the list, “Personal Training” is still highlighted.

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

I the code that shows the dropdown menu works and it highlights any single item that is hovered all I need is how to highlight a dropdown link and its parent link.

Thanks in advance, Slulego

Answer 1

Since the submenu is a ul contained in your menu header li, you should be applying the :hover styling to the li, and not the a. See it in action in this JSFiddle.

I changed the CSS selector #nav a:hover to #nav > li:hover.

And, though it needn’t be said, the aesthetics of that JSFiddle is far from optimal; I just hacked it together to show what I’m talking about 🙂