SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    Here's an example of my menu structure...

    HTML Code:
    <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. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,619
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    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 {...}


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •