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;
  • 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

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 {
#menu .current-menu-item li a:first-child { 
#menu .current-menu-item a { 
color:black !important ;

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

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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