Parent and siblings inherits a child list items styles
- 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: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:hover {..}, ul#menu li.expanded:hover {..} , but even in that case, when I hover above li.expanded, it's child inherits the style.
It is important for me to style the list items, not a (the style is more complicated than the one I posted)
How do I fix this?
