How to change the background colour of submenu

How can I change the background colour of sub-menu when you hover over it?


Apply custom css code below and change background-color value to your liking:

/*sub menu hover color*/
#mainnav .sub-menu li:hover > a {
    background-color: #d65050;

Apply the code with simple custom css plugin.

Best Regards

thank you very much!! worked :slight_smile:

You’re welcome,

Best Regards

Thank you for that - How do i change the background colour of each submenu item



That will require to target each menu item over its unique ID. Inspect menu items with Google Chrome developer tools to find IDs like this and then use it in your css like this . This is the code from my example, but in your case IDs will be different:

#mainnav li:hover > .sub-menu > li#menu-item-256 a {
    background-color: #ffcc00;

Best Regards!