CODEWITHSUNDEEP
cssmenuhover
bigData
bigData

Reputation: 1318

change color of li on hover

I want to change color of a li element on hover, 

<ul id="sitemap">
        <li><a href="#">a</a>
            <ul>
                <li><a href="#">b</a></li>
                <li><a href="#">c</a></li>
                <li><a href="#">d</a></li>
                <li><a href="#">e</a></li>
                <li><a href="#">f</a></li>
            </ul>                   
        </li>
</ul>

here is the css code :

 #sitemap li:hover{
    background:#eee;
}

When I hover on any child li of a i.e b,c.. f it also changes background color of parent(a). How can I change the bg-color of only current li element on hover, there can be li at 3rd level also so what could be the general solution..

Upvotes: 0

Views: 246

Answers (2)

CWSites
CWSites

Reputation: 1801

Add > into your css so that it has to be a direct descendant.

#sitemap ul > li > a:hover {
  background:#eee;
}

For more information check out http://www.w3.org/TR/CSS2/selector.html#child-selectors

Upvotes: 0

Cody Guldner
Cody Guldner

Reputation: 2886

Simply add ul to your selector, and it will be fine

#sitemap ul li a:hover {
  background:#eee;
}

The reason it wasn't working before is because it was targeting the top level li, so everything below it was apart of that li. Therefore, when the submenu was hovered, all of the block was highlighted

Fiddle

Upvotes: 3

Related Questions