WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I have a menu containing 2 item that pointing to 1 page, my question is how do i highlight the top level item according to where i click it.

 <ul class="mainNavi" id="menu-main">
  <li><a href="#">Home</a></li>       
  <li><a href="#">Funding Guidelines</a>
    <ul class="sub-menu">
     <li><a href="#">Learning Institutions</a>
         <ul class="sub-menu">
           <li><a href="#">Who Is Eligible</a></li>
           <li><a href="#">What We Fund</a></li>        
     <li><a href="#">FAQs</a></li>
 <li><a href="#">Projects</a></li>
 <li><a href="#">Donations</a>
     <ul class="sub-menu">
       <li><a href="#">Make Donation</a></li>
       <li><a href="#">Request for Tax Exempt Receipts</a></li>
       <li><a href="#">FAQs</a></li>

Referring to above i have two FAQ link, one under Funding Guideline and another one under Donation which both link to the same page. My problem is how to highlight the top-level menu when i click to the link under respective sub-menu, without highlighting the other one. What i have now is that when i click to the menu, it's highlighted both top level menu.

share|improve this question
can we see the code you are using to do the highlighting? – BandonRandon Mar 27 '12 at 6:51
@BandonRandon i've pointed out the css to change color for current-menu-item and current-menu-ancestor class. – ajapis Mar 29 '12 at 7:20

you're best bet may be to set a custom class for each of the FAQ links then do a simple jquery on click for that event.

share|improve this answer

Your Answer


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.