CSS Rollover button bug

Question

Hi Everyone,

I'm trying to create a drop down button and its almost working except one little bug. I have several big buttons that change background color when the user hovers over them and one of them, the language button, displays several suboptions inside itself when the user hovers over it. That all works fine except the language button doesn't change its background color when the user hovers over it. It does change its color if the cursor is just inside the button but not if it touches the 3 sub options. What i need is a technique or a rule that states that the button will change background color if user hovers over it or if the user hovers over one of its children elements. How do I achieve this? Here's the markup:

   <ul>
                            <li><a href="/home/" title="Go to the Home page" class="current"><span>Home</span></a></li>
                            <li><a href="/about-us/" title="Go to the About Us page" class="link"><span>About us</span></a></li>
                            <li><a href="/products/" title="Go to the Products page" class="link"><span>Products</span></a></li>
                            <li><a href="/services/" title="Go to the Services page" class="link"><span>Services</span></a></li>
                            <li><a href="/news/" title="Go to the News page" class="link"><span>News</span></a></li>
                            <li><a href="/dealers/" title="Go to the Dealers page" class="link"><span>Dealers</span></a></li>
                            <li id="Rollover"><a href="" title="select language" class="link"><span>Language</span></a>
                                <ul>
                                    <li><a href="/english/">English</a></li>
                                    <li><a href="/french/">French</a></li>
                                    <li><a href="/spanish/">Spanish</a></li>
                                </ul>
                            </li>
                            <li><a href="/contact-us/" title="Go to the contacts page" class="link"><span>Contact us</span></a></li>
                        </ul>

Thanks in advance!

Answer 1

If your rollover rule is on the <a> tag, then this will not work because the sub options are not actually children of the anchor, they are children of #Rollover. This should work:

#Rollover:hover{background-color:<your color here>}

Answer 2

You could try using a little javascript to add a class when the rollover is hovered. If you were using a scripting library like jQuery it would be something like this:

$('#rollover').hover(function(){
         $(this).addClass('hover');
       },function(){
         $(this).removeClass('hover');
       });
$('#rollover a').hover(function(){
         $(this).parent("#rollover").addClass('hover');
       },function(){
         $(this).parent("#rollover").removeClass('hover');
       });

this code is untested so it might need a tweak or two, but this should also fix any CSS bugs that come up in IE (assuming you're using a suckerfish-type menu)