[Resolved] Can I give 2nd level sub-menu its own colorscheme by using CSS

[Michael Andersen]

Hi,

This is the CSS I use to format my 1st level Sub Menu:

/*** SUB-MENU ***/
/* Submenu */
.main-navigation .main-nav ul ul li a {
	background-color: #d5d5d5 !important;
	color: #333 !important;
}
/* Submenu - hover */
.main-navigation .main-nav ul ul li:hover > a {
	background-color: #666 !important;
	color: #f5f5f5 !important;
}
/* Submenu - current */
.main-navigation .main-nav ul ul li[class*="current-menu-"] > a {
	background-color: #999 !important;
	color: #f5f5f5 !important;
}

Can I by using CSS create a equivalent colorscheme for 2nd level sub menu?

See graphic.

[Leo]

Hi there,

The submenu colors are actually in the customizer so no CSS needed:
https://www.screencast.com/t/SgykkVNR

And you definitely don’t want to add !important to every single piece of CSS either.

For the third level menu item, try this CSS:

.main-navigation .main-nav ul ul ul li a {
    background-color: #fff;
    color: #000;
}

[Michael Andersen]

Hi,

Thank you for your quick response. The CSS code worked fine.

And thanks for the tip regarding !important. I removed it and the remaining code still works.

/Michael

[Leo]

No problem 🙂

[Author]

Posts