Here's an example of my menu structure...
<div class="menu nav">
<li class="current-menu-item current_page_item"><a href="about-us/">About Us</a>
<li><a href="contact-us/">Contact Us</a></li>
<li><a href="directions/">Directions with a long title that should wrap</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.