Hover background color in flyout menu

HTML & CSS
1

Hi, I have a menu that has a flyout menu. I need to remove the background color on hover. Can anyone help? Thanks.
http://www.wordpressbyd.com/gustave/indextest.html

2

Hi,

You can address the background colour of the flyout submenu with these styles.


ul#nav  li:hover li a,
ul#nav  li.over li a{background:transparent}/* default no background on the flyout items*/

ul#nav li:hover li a:hover,
ul#nav li.over li a:hover{background:red}/* set the hover colour you need or make it transparent if none required*/
3

Hi, I gave it a try and it did not work. The flyout menu seems to be inheriting the styles from the main menu. Here is a bit of code. The bold is the color that is showing up on hover.

/* this sets all hovered lists to red */
#nav li:hover a,#nav li.over a,
#nav li:hover li a:hover,#nav li.over li a:hover {
color: #a5b531;
background-color: #736d37;
}

/* set dropdown to default /
#nav li:hover li a,#nav li.over li a {
color: #FFFFFF;
background-color: #95952e;
}
#nav li ul li a {
width: 100px;
} / Sub Menu Styles */
#nav li:hover ul,#nav li.over ul {
margin-left:200px;
margin-top: -10px;
}

Thanks for your help.

4

No the code I gave you is working as I tested on your live site with css terminal and it works as expected.

You must have added the css before the original rules and thus they would have been over-ridden.

Add the code I gave you to the end of CSS or if you are confident find the matching rules in menu.css and change them directly.

5

Hi Paul,

I added the code as you suggested. It fixes the background color issue. However I am using @font to load a no-web font. Upon rollover when your code is installed the font in the sub menu goes all wonky. Somehow the code is interfering with the font or the rollover on the subnav. Any ideas? Thanks.

6

Hi,

You still haven’t added my code so I can’t tell if you’ve done it right but it will have no effect on the font at all.

The problem you likely saw is that removing the background unmasked a problem with your code in that your list items wrapped to the next line and fell under the text below because you set the anchors to only 100px wide. This was masked when they has a background-colour but when you remove the background colour the wrapped text is visible.

Either lengthen the list items anchores to accommodate the text or set white-space:nowrap to stop them wrapping.

Here’s how to lengthen them:


ul#nav,
ul#nav ul,
ul#nav ul li,
ul#nav ul li a{width:180px}

#nav li:hover ul,#nav li.over ul  {
margin-left:180px;
margin-top: -10px;
}

That should be used in conjunction with the code I already gave you :slight_smile:

7

So that solved the background color. Thanks. Can you help with one more thing. How do I change the color of the submenu rollover on the text? It seems like that is inheriting the color from the main menu as well. Thanks again.

8

HI,

You need to address the sub list items as anything you set on the top level will automatically apply to the nested children also.


ul#nav li:hover li a:hover,
ul#nav li.over li a:hover{color:red}