CSS Rollover button bug

Posted by Nick on Stack Overflow See other posts from Stack Overflow or by Nick
Published on 2010-03-24T04:15:13Z Indexed on 2010/03/24 4:23 UTC
Read the original article Hit count: 578

Filed under:
|
|

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!

© Stack Overflow or respective owner

Related posts about css

Related posts about css-selectors