On the Divi theme, when you open a drop-down menu and hover over a particular menu item, the item's background color is changed to highlight the item. If you want to change this color, or get rid of the hover effect (by setting its color to the same as the actual menu), you can do so with the following CSS:
#top-menu li li a:hover {
background-color:#fff0f0;
}Related Post: Adding CSS to the Divi Theme
Here's the result:
Fixed / Scrolled Header
To set a separate submenu item hover color when the header is "fixed" (i.e. when it remains at the top of the page after you've scrolled down), you can use the following CSS:
.et-fixed-header #top-menu li li a:hover {
background-color: #ddd;
}
I can't seem to get this to work with a mega menu.
Any help would be greatly appreciated.
http://www.njpackagingservices.com
Figured it out by looking at some of your suggestions.
Hi Dan, What if I want difference color for each submenu in Dropdown Menu?
Hi Tien, you can use something like this:
#top-menu li:nth-child(3) li:nth-child(2) a:hover { background-color: red !important; }The "li:nth-child(3)" part applies the rule only to the third main menu item from the left. Then the next "li:nth-child(2)" applies the rule only to the second item from the top in that main menu item's drop down menu. By adding more copies of this rule, you can set different background hover colors for each submenu item.
Hopefully this does what you need, but let me know if I've misunderstood you. Thanks!
Hi Dan,
I'm trying to use a variation of your CSS (removing "a:hover") to change the background color of my drop down menus. It almost works, but it's leaving white space at the top and bottom of the menu, presumably because I'm only changing the background color of the menu items, not the menu itself. Any thoughts?
Hi Adrien, Divi actually has a setting for this in the Theme Customizer under "Header & Navigation > Primary Menu Bar > Dropdown Menu Background Color".
If you do need to do it manually, something like this should work:
#main-header .nav li ul.sub-menu { background-color: green !important; }Thank you so much!
dear dan
i want to change the hover color in footer menu.
Normal state grey and on hover white.
Could you please help me?
Hi Nikos, you should be able to change the hover color to white using the following CSS:
.bottom-nav .menu-item a:hover { color: white; opacity: 1; }Dear Dan excellent solution , much obliged.
If you open my divitheme based website and hover your mouse over gallery you'll see that there's a gap between the submenu's box and the menu. Could you please help me fixing this? thanks a lot in advance.
Hi fabíola, did you get this working? When I look on Chrome and IE the submenu box is nicely touching the menu – there is no gap. If you're still seeing it, let me know what OS / browser you are using and I'll see if I can replicate it. Thanks!
THANK YOU! This has been driving me crazy for about a week now.
Lynn