Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

In a previous question I asked (and later worked out) how to style sub menus, I want to expand on that with another question related to styling sub-menus.

I have hit an issue were if the parent is the selected page all child pages pick up the same styling, I believe this is because the current-menu-item class gets added to the parent li.

If a child element is selected only the child is highlighted (which is correct)

Has anyone encountered this before? What is the best way to only have the selected page highlighted and not the child elements of that page?

As requested, here is the CSS that is being called to highlight the child menu.

.current-page a, .current-menu-item a {
    background-color: #EE8833;
}
share|improve this question
    
Can you post the CSS you use to style the menu? There should be ample classes on menu items to style them effectively without the problem you're describing(in theory), might just need a bit more specifity with your CSS is all. –  t31os Aug 9 '11 at 13:21
    
Specificity was the key, if you could put that as an answer I will accept it, once I posted the CSS it was clear as day, I need to include > –  Toby Aug 9 '11 at 14:12
    
Point is that this is a) no WP Q & b) can be solved using child selectors, which only select the direct child: .first-menu-parent-item ul > .current-menu-item { /* style first element */ }. –  kaiser Aug 9 '11 at 14:13
    
You should still be able to do it without needing to use el > child type selectors(which won't work in some browsers, namingly IE).. –  t31os Aug 9 '11 at 14:17

1 Answer 1

up vote 1 down vote accepted

You can try using the .current-menu-item li a"first-child selector. Here is an example I've used in the past to highlight the current menu item only:

#menu .current-menu-item {
background:white; 
}
#menu .current-menu-item li a:first-child { 
color:white!important;
}
#menu .current-menu-item a { 
color:black !important ;
}

You will need to change the #menu to your id or class.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.