Hover effect for parent unordered list inherited by child list
- by elvista
I have a simple menu
<ul id="menu">
<li class="leaf"><a href="#">Menu Item 1</a></li>
<li class="leaf"><a href="#">Menu Item 2</a></li>
<li class="expanded"><a href="#">Menu Item 3</a>
<ul>
<li class="leaf"><a href="#">Menu Item a</a></li>
<li class="leaf"><a href="#">Menu Item b</a></li>
<li class="leaf"><a href="#">Menu Item c</a></li>
</ul>
</li>
<li class="leaf"><a href="#">Menu Item 4</a></li>
</ul>
and
ul#menu li a:hover {font-weight:bold;}
The problem I am facing is when I hover above a ul li li, the parent as well as all its siblings gets the hover effect. I only want the list item I hovered above to get the effect.
I tried ul#menu li.leaf a: hover {..}, ul#menu li.expanded a: hover {..} , but even in that case, when I hover above li.expanded, it's child inherits the style.
How do I fix this?
