Hey Everyone,

So I have some nested lists (only one level deep) and I'm running into trouble with the CSS :hover feature. I only want the hover to apply to the parent class, but I can't figure that one out.

Here's my CSS

<style type="text/css" media="screen">
.listblock li img {
   visibility: hidden;   
}  
.listblock li:hover img {
   visibility: visible;
} 
</style> 

And here is a sample of one of the lists.

<ul>
    <li>One <a href="#"><img src="img/basket.png" height="16" width="16" alt="Buy" class="buy" onClick="pageTracker._trackEvent('Outbound Links', 'Amazon');"/></a></li>
    <li>Two <a href="#"><img src="img/basket.png" height="16" width="16" class="buy" /></a>
        <ul>
            <li>Uno<a href="#"><img src="img/basket.png" height="16" width="16" class="buy" /></a></li>
            <li>Dos <a href="#"><img src="img/basket.png" height="16" width="16" class="buy" /></a></li>
        </ul>
    </li>
    <li>Three <a href="#"><img src="img/basket.png" height="16" width="16" alt="Buy" class="buy" onClick="pageTracker._trackEvent('Outbound Links', 'Amazon');"/></a></li>
</ul>

The problem is that the image in the Uno and Dos list items also hovers. :(

Help please! Thanks a lot