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.


#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;
}

I just play with Firebug to figure out these things virtually. In this case how about using as the selector?

Thanks lmilesw! Worked like a charm.

etask, i used the css lmilesw mentioned and just specified color. I don't have child menu, but hopefully this helps:

.current_page_item a {
background: #cccccc !important;
border: 1px solid #cccccc !important;
color: #787878 !important:
}

Atahualpa 3.7.9
WP 3.4.2
http://www.nodesignstein.com

Altho, using the .current_page_item a prevents the a: hover style from taking effect. Anyway around that? I'm thinking it's the !important in my css:

If i remove the !important, however, it doesn't work.

Also, even after placing the css above, i'm still noticing a 1 pixel border around my 'active' state which seems to be inherited (?) from the "background color" option in ATO>MENU 1 (Page Menu). It's really only noticeable on the bottom of the 'active' menu bar item, but i'd like that menu bar item to 'bleed' right into the main body color.

I thought that placing !important; in a:hover state would override what is in the ATO>MENU 1 (Page Menu) options, but i can't seem to shake that 1 px. Argggg.

Thanks for the suggestions on this issue so far!

thoughts? attached is a pic of my issue and here's my css (via JDs cheat sheet):

You guys are so nice. Thank you very much for all your help.

I am working on another navigation menu and try to do the same thing. Any idea? Thanks.

CSS:

#nv { overflow: hidden; padding-left: 3px; height: 33px; {MENUBGCODE}; }
#nv li { float: left; padding-right: 1px; height: 33px; line-height: 33px; background: url({IMGDIR}/nv_a.png) no-repeat 100% 0; font-weight: 700; font-size: 14px; }
.ie_all #nv li { line-height: 36px; }
.ie6 #nv li { line-height: 33px; }
#nv li a { float: left; padding: 0 9px; height: 33px; }
#nv li a { color: {MENUTEXT}; }
#nv li span { display: none; }
#nv li.a { margin-left: -1px; {MENUHOVERBGCODE}; }
#nv li.a a { color: {MENUHOVERTEXT}; }
#nv li a:hover { background: url({IMGDIR}/nv_a.png) no-repeat 50% -66px; }
#nv li.hover a:hover, #nv li.hover a { background: url({IMGDIR}/nv_a.png) no-repeat 50% -99px; }
#mu { position: relative; z-index: 1; }
.ie6 #mu, .ie7 #mu { line-height: 0; font-size: 0; }
#mu ul { background: url({IMGDIR}/mu_bg.png) no-repeat 0 100%; line-height: 22px; z-index: 2; font-size: 12px; }
#mu li { float: left; height: 32px }
#mu a { float: left; display: inline; margin: 5px 6px; padding: 0 10px; white-space: nowrap; }
#mu a:hover { margin: 4px 5px; border: 1px solid {SPECIALBORDER}; background: {SPECIALBG}; color: {HIGHLIGHTLINK}; text-decoration: none; }
.floatmu { position: absolute; left: 0; top: 0; }


HTML:

<div id="nv">
<ul>
<!--{loop $_G['setting']['navs'] $nav}-->
<!--{if $nav['available'] && (!$nav['level'] || ($nav['level'] == 1 && $_G['uid']) || ($nav['level'] == 2 && $_G['adminid'] > 0) || ($nav['level'] == 3 && $_G['adminid'] == 1))}--><li {if $mnid == $nav[navid]}class="a" {/if}$nav[nav]></li><!--{/if}-->
<!--{/loop}-->
</ul>
<!--{hook/global_nav_extra}-->
</div>
<!--{if !empty($_G['setting']['plugins']['jsmenu'])}-->
<ul class="p_pop h_pop" id="plugin_menu" style="display: none">
<!--{loop $_G['setting']['plugins']['jsmenu'] $module}-->
<!--{if !$module['adminid'] || ($module['adminid'] && $_G['adminid'] > 0 && $module['adminid'] >= $_G['adminid'])}-->
<li>$module[url]</li>
<!--{/if}-->
<!--{/loop}-->
</ul>
<!--{/if}-->
$_G[setting][menunavs]
<div id="mu" class="cl">
<!--{if $_G['setting']['subnavs']}-->
<!--{loop $_G[setting][subnavs] $navid $subnav}-->
<!--{if $_G['setting']['navsubhover'] || $mnid == $navid}-->
<ul class="cl {if $mnid == $navid}current{/if}" id="snav_$navid" style="display:{if $mnid != $navid}none{/if}">
$subnav
</ul>
<!--{/if}-->
<!--{/loop}-->
<!--{/if}-->
</div>