SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Highligh parent and child navigation menu when active or current

    Would someone show me how to highlight parent and child navigation menu when active or current. Thank you.

    Code:
    #menu {
    	font-weight:700;
    	list-style:none;
    	width:990px;
    	margin:0px auto 0px auto;
    	height:29px;
    	padding:0px 0px 0px 0px;
    
    	/* Rounded Corners */
    	
    	-moz-border-radius: 0px;
    	-webkit-border-radius: 0px;
    	border-radius: 0px;
    
    	/* Background color and gradients */
    	
    	background: #014464;
    	background: -moz-linear-gradient(top, #, #);
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#), to(#));
    	
    	/* Borders */
    	
    	border: 1px solid #002232;
    
    	-moz-box-shadow:inset 0px 0px 1px #edf9ff;
    	-webkit-box-shadow:inset 0px 0px 1px #edf9ff;
    	box-shadow:inset 0px 0px 1px #edf9ff;
    }
    
    #menu li {
    	float:left;
    	display:block;
    	text-align:center;
    	position:relative;
    	padding: 4px 5px 4px 5px;
    	margin-right:0px;
    	margin-top:0px;
    	border:none;
    	z-index: 1;
    }
    
    #menu li:hover {
    	border: 1px solid #777777;
    	padding: 2px 4px 4px 4px;
    	
    	/* Background color and gradients */
    	
    	background: #F4F4F4;
    	background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
    	
    	/* Rounded corners */
    	
    	-moz-border-radius: 0px 0px 0px 0px;
    	-webkit-border-radius: 0px 0px 0px 0px;
    	border-radius: 0px 0px 0px 0px;
    }
    
    #menu li a {
    	font-family:Arial Narrow;
    	font-size:15px; 
    	color: #EEEEEE;
    	display:block;
    	outline:0;
    	text-decoration:none;
    	text-shadow: 0px 0px 0px #000;
    }
    
    #menu li:hover a {
    	color:#161616;
    	text-shadow: 0px 0px 0px #ffffff;
    }
    Last edited by ralph.m; Oct 27, 2012 at 19:14. Reason: added code tags

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Hi etask. Welcome to the forums.

    We also need to see your HTML to help with this, but you might also find this thread helpful, as it indicates a number of ways to go about this:

    http://www.sitepoint.com/forums/show...-CSS&p=5091887

  3. #3
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you ralph. I just got it.


Tags for this Thread

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
  •