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

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>
		<li><a href="privacy-policy/">Privacy Policy</a></li>

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.

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 {…}