Parent and siblings inherits a child list items styles

Question

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?

Answer 1

I'm not really sure why this might be happening, but I'm assuming you're trying to put together a CSS-based dropdown menu?

I would recommend that you check out http://htmldog.com/articles/suckerfish/dropdowns/. It's a great help, and I always base dropdown menus off of it.

Sounds like your problem is some weird inheritance bug - does it happen in all browsers?

Answer 2

#menu li:hover li { font-weight:normal }
#menu li:hover, #menu li li:hover {font-weight:bold;}

The first rule prevents making all 2nd-level li's bold when a parent li is hovered. the second rule then sets only the currently hovered 1st-level li's and currently hovered 2nd-level li's to bold.