CODEWITHSUNDEEP
cssdrop-down-menu
Frank G.
Frank G.

Reputation: 1579

Main Menu Color Change

I am trying to target the header element of a drop down menu which I load in jfiddle here: http://jsfiddle.net/DZLtm/16/

I am trying to get it so when you roll over nav ul li it show black instead of red. Here are the lines that I would have thought would do it.

nav ul li {float: right; width: 172px; height: 35px; background-color: red;}
nav ul li:hover > ul {display: block; text-align: left; background-color: black;}

Here is the HTML:

<nav>
<ul>
    <li><a href="#">BUTTON IMAGE</a>
        <ul>
            <li><a href="#">Accreditation Client Login</a></li>
            <li><a href="#">Training Client Login</a></li>
            <li><a href="#">Training Registration</a></li>
            <li><a href="#">Guardian Tracking</a></li>
        </ul>
    </li>
</ul>
</nav>

Can someone please tell me why nav ul li:hover wont work and what is > ul have to do with it. When I remove it it breaks the menu. Thank you Frank!

Upvotes: 0

Views: 30

Answers (1)

Grant Weiss
Grant Weiss

Reputation: 355

Just add nav ul li:hover { background-color:black; }

http://jsfiddle.net/weissman258/DZLtm/17/

Upvotes: 2

Related Questions