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
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