Help to write sub-menu color css

HTML & CSS
1

Please help me to write css for changing the color of sub-menu text:

<nav id="top-menu-nav">
				<ul id="top-menu" class="nav">
<li id="menu-item-1058" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-1001 current_page_item menu-item-1058"><a href="#">xxx</a></li>
<li id="menu-item-604" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-604"><a href="#">xxx</a>
<ul class="sub-menu">
	<li id="menu-item-599" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-599"><a href="#">xxx</a></li>
	<li id="menu-item-602" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-602"><a href="#">xxx</a></li>
	<li id="menu-item-598" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-598"><a href="#">xxx</a></li>
</ul>
</li>
<li id="menu-item-600" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-600"><a href="#">xxx</a></li>

</ul>				</nav>

ul.sub-menu li a { color:#000; } What is wrong with this?

2

If it’s not working, then it’s not specific enough (meaning that some other rule is overriding it. As a test, you could try something like this:

#top-menu-nav ul.sub-menu li a { color:#000; }

or perhaps

#top-menu-nav ul ul.sub-menu li a { color:#000; }

etc. Or of course, as a stop gap, you could do this, though it’s not a good idea in production:

ul.sub-menu li a { color:#000 !important; }
3

Thank you so much ralph.m!

“!important” did it. I had forgotten about this possibility.

4

As I said, though, !important is the worst option. It may give you trouble in future. Better to sort out your selectors properly and get the right specificity. If you post a link, we can help with that. :slight_smile: