How to isolate styles of an li menu to the "selected" parent element only?

HTML & CSS
1

Here’s an example of my menu structure…

<div class="menu nav">
	<ul class="menu">
		<li><a href="#">Home</a></li>
		<li class="current-menu-item current_page_item"><a href="about-us/">About Us</a>
			<ul class="sub-menu">
				<li><a href="contact-us/">Contact Us</a></li>
				<li><a href="directions/">Directions with a long title that should wrap</a></li>
			</ul>
		</li>
		<li><a href="privacy-policy/">Privacy Policy</a></li>
	</ul>
</div>

I want to highlight the “current-menu-item” on the top level only. I’d like to make the background a different color as well as the text. However, I don’t want any of these settings to apply to the menu’s child elements.

How can I isolate the parent li’s styles so they do not apply to the child elements.

2

You can give them all the same class. But typically most prob just target the ul li and then override it with ul li li {…}