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?