CSS hover colors

HTML & CSS
1

on my page at http://www.meadowlarkco.com/company2.php could someone take a look a let me know on my CSS at menunew.css what I need to change/add so that when I go over ‘contact us’ the submenu items are still colored #EAEAD6 but when you hover over them change to #FFFFFF

thanks

2

It looks like you have another point in the CSS that also needs the child selector fix:


#mainMenu li.scriptHook a,
#mainMenu li:hover a {
	background:#FFFFFF;
}
3

actually when I go over ‘contact us’ the submenu items…sales, csr, and dispatch should have a background color of #EAEAD6 but when I hover over them they should be #FFFFFF

4

The problem is with this line:


#mainMenu li:hover a {
    background:#FFFFFF;
}

That selector is targeting the “Contact Us” <a>… but also every <a> inside the sub-menu. If you don’t need to support IE6, the easiest fix would be to use the child selector instead:


#mainMenu > li:hover > a {
    background:#FFFFFF;
}

…But that introduces a bug where the sub-menu doesn’t have a background until the user hovers over it. To fix that, change the “#mainMenu li ul:hover” in line 107 (I think) to “#mainMenu li ul”.

5

I made your suggested changes and that didn’t seem to make any change?

6

thanks everyone for your help