[Sam Diller]

I recently upgraded to 3.07 and I’m trying to change the background color of the submenu when I hover
The website is http://www.whisperingmanes.org

I tried to use the following css, but the hover remains white.
#access li {
padding: 0;
}
#access a {
padding: 16px 10px 0;
}
#access a:hover,
#access ul li.current-menu-item a,
#access ul li.current_page_ancestor a,
#access ul li.current-menu-ancestor a,
#access ul li.current_page_item a,
#access ul li:hover > a,
#access ul li ul li a:hover,
#access ul li ul li:hover > a,
#access ul li.current-menu-item ul li a:hover {
background-color: #004264;
color: #fff;
}

[Theme Horse Support Team]

Hi Erin,

To change the background color of the submenu only go to Appearance> Customize > Design Options > Custom CSS and paste the below CSS code then click on Save button.

#access ul li ul {
	background-color: #fff !important;
}

Note: Change the above HEX color code #fff to your own color code.

Thank you!

[Sam Diller]

I’m sorry but I didn’t ask the question well. I need to change the color of the submenu when you hover over the menu item.
I tried the following code, but when I hover over the menu item it turns white. The font is white making it impossible to read the item.
I have tried adding !important and changing the last color in the code to match background-color, but no matter what I try the hover color remains white. I want white font on a blue background when I hover over the submenu item

The website is http://www.whisperingmanes.org

}
#access a:hover,
#access ul li.current-menu-item a,
#access ul li.current_page_ancestor a,
#access ul li.current-menu-ancestor a,
#access ul li.current_page_item a,
#access ul li:hover > a,
#access ul li ul li a:hover,
#access ul li ul li:hover > a,
#access ul li.current-menu-item ul li a:hover {
background-color: #004264;
color: #fff;
}

[Theme Horse Support Team]

Hi Erin,

Please try below css code.

#access a:hover,
#access ul li.current-menu-item a,
#access ul li.current_page_ancestor a,
#access ul li.current-menu-ancestor a,
#access ul li.current_page_item a,
#access ul li:hover > a,
#access ul li ul li a:hover,
#access ul li ul li:hover > a,
#access ul li.current-menu-item ul li a:hover {
    background-color: #004264 !important;
    color: #fff !important;
}

Thank you!

[Sam Diller]

The above code does not fix the problem. When I hover the hover color is white instead of the color #004264.
The hover color was working properly before we updated to 3.07

[Theme Horse Support Team]

Hi Erin,

Can you please remove above css from the custom css and paste the below one:

#access ul li ul li:hover a {
    background-color: #004264 !important;
    color: #fff !important;
}

Thank you!

[Sam Diller]

thank you at first that did not appear to fix the problem. But I changed the order of the CSS and it works now. As I’m clearly not an expert in CSS, I don’t know if changing the order really fixed it, but it is working. So thank you for your help!

[Theme Horse Support Team]

Hi Erin,

You are welcome Erin. Please let us know if you have any problem.

Thank you!

[Author]

Posts