Question

I have a navigation with hidden sub menus that display when ever their parent menu link is hovered over. I’ a bit stuck on how to actually target the links with the list of the parent navigation item.

Here is my code:

<nav id="nav">
        <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li>
            <a href="#">Categories</a>
            <ul>
                <li><a href="#">12" Vinyl album</a></li>
                <li><a href="#">12" Vinyl single</a></li>
                <li><a href="#">7" Vinyl album</a></li>
                <li><a href="#">7" Vinyl single</a></li>
                <li><a href="#">CD</a></li>
                <li><a href="#">DVD</a></li>
                <li><a href="#">Book</a></li>
                <li><a href="#">Calendar</a></li>
                <li><a href="#">Other</a></li>
            </ul>
        </li>
        </ul>
</nav>

I have tried the following without any luck:

nav li ul li a:link{
    color:#fba326;
}

Answer 1

The only problem I see is that you should use a:hover instead of a:link like so

nav li ul li a:hover{
    color:#fba326;
}