How to highlight the parent item in active state without the children being affected in wordpress navigation?


Tags: php,html,css,wordpress

Problem :

I've been trying to code a wordpress drop down menu. Please see here: http://www.hongkong8.info/.

I have almost got it to behave the way I want except one thing. When I click on the "ABOUT" link, that triggers the active state which is the color #111154. this is correct, however if you roll over the "ABOUT" link again you see that its child pages "ABOUT 1" and "ABOUT 2" are also highlight with the color #111154, this is not what I want. I just want the parent page to be highlighted in the active state color and not its children pages. Its children pages should have the color of #01011D.

The menu uses the default wordpress classes .ie register_nav_menus etc. I have tried different css classes but can't pinpoint the right class. My feeling was that it could be targetted using .current-menu-item, but I don't know how to target the child menu items

Have included the CSS for the nav menu below. Any insight is much appreciated!

/* Navigation Menus */
.site-nav ul {
	margin: 0;
	padding: 0;
}

.site-nav ul:before, .site-nav ul:after {content: ""; display: table;}
.site-nav ul:after {clear:both;}
.site-nav ul {*zoom: 1;}

.site-nav ul li {
	list-style: none;
	float: left;
}

.site-nav ul ul {
	display:none;
	position: relative;
	float: left;
	background: #01011D;
}

.site-nav ul li:hover ul{
	display: block;
	float: left;
	position: absolute;
	width:130px;
}

.site-nav ul ul a:hover{
	background-color: #ECECEC;
	display: block;
}

.site-nav ul ul li,
.site-nav ul ul a {
	float: none;
}

/* site header menu*/

div.nav-wrapper{
	width: 960px;
	background: #1c137f; /* Old browsers */
	background: -moz-linear-gradient(top,  #1c137f 2%, #0b093c 27%, #0b093c 70%, #020014 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,#1c137f), color-stop(27%,#0b093c), color-stop(70%,#0b093c), color-stop(100%,#020014)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #1c137f 2%,#0b093c 27%,#0b093c 70%,#020014 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #1c137f 2%,#0b093c 27%,#0b093c 70%,#020014 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #1c137f 2%,#0b093c 27%,#0b093c 70%,#020014 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #1c137f 2%,#0b093c 27%,#0b093c 70%,#020014 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1c137f', endColorstr='#020014',GradientType=0 ); /* IE6-9 */
	margin: 0 auto;
	text-align: left;
	border-top:solid 1px #fff;
	box-shadow: 1px 1px 20px 1px #040315;
	border-bottom:solid 1px #7E0000;
	position: relative;
	float:left;
	z-index: 20;
}



.site-header nav ul li a:link,
.site-header nav ul li a:visited{
	display: block;
	padding: 7px 25px;
	text-decoration: none;
}

.site-header nav ul li a:hover {
	background-color: #ECECEC; /*hover state*/
}

.site-header nav ul li.current-menu-item a:link,
.site-header nav ul li.current-menu-item a:visited {
	background-color: #111154; /*active state*/
	color: #FFF;
}



Solution :

Looking at the structure, you could probably use the direct descendant selector to target only the anchor at the first level, like this:

.site-header nav ul li.current-menu-item > a:link,
.site-header nav ul li.current-menu-item > a:visited {
    background-color: #111154; /*active state*/
    color: #FFF;
}

This shouldn't apply the #111154 background color to the anchors in the sub menu.


    CSS Howto..

    How to reverse jQuery css styling?

    How to change a span to look like a pre with CSS?

    How do I set the table row heights to minimum except last row?

    How to use Firebug to easily find which css file defines a particular style

    CSS: How to style text in a box with a limited height

    Css how to replace block after click button

    How to add this background-image effect to a div?

    How to fill page width of tables with css

    How to Extend Wrapped Elements to the Full Browser Width Using CSS?

    How to add pixels to a current position of an element?

    How to style using nth-of-type within a ul tag?

    How to “float” an absolutely positioned element div out of its container

    How can I send a Jquery var to be used in a CSS property

    How do I add a button click event to my own button in Visual Studio C#

    How to make CSS sourcemapping work in Chrome with Compass (SASS)

    How to make a simple timer image slideshow using HTML and CSS

    How can I align text to the top and the bottom of the same div css?

    css nested classes, how to not repeat code?

    How to enable auto indentation in lists and list items?

    How to modify a CSS display property from JavaScript?

    HTML, CSS how to make width of element always to bottom of page?

    How to style pseudo counter in CSS

    How does CSS3 flexbox negative-flex work?

    How do you deal with Internet Explorer?

    How do I implement search?

    How to combine several hover elements in JS/Jquery

    How to add JS and CSS to all content parts in an Orchard module

    How to apply nested css using jQuery?

    How to stop CSS within a RichText field from overwriting document

    css3 : how to make div go up to bottom of page?