Question

I’m looking to highlight the second level parent of a navigation bar when hovering over any of it’s children; the top level has completely different styling so doesn’t apply to what I’m trying to do, so when I hover over any of the third level items I want to style the second level. I understand javascript/jquery is the way to go for this so as my skills aren’t up to scratch I’ve hit a brick wall.

Here’s my standard html navigation structure:

<nav class="primary-navigation">
     <ul>
         <li><a href="#">TOP LEVEL</a>
             <ul>
                 <li><a href="#">SECOND LEVEL</a>
                     <ul>
                         <li><a href="#">THIRD LEVEL</a></li>
                         <li><a href="#">THIRD LEVEL</a></li>
                         <li><a href="#">THIRD LEVEL</a></li>                    
                     </ul>
                 </li>
             </ul>
         </li>
     </ul>
</nav>

I’ve been trying to work without classes, but I’ve been having trouble with selecting the li items without them, ideally if it’s possible I’d like to learn how to do it without them.

Here’s how far I’ve gotten so far, but it seems to add the ‘highlighted’ class to all the children as well, but I just want to apply it to the parent item!

$('THIRD LEVEL').mouseenter(function() {
      $(this).parent().closest('SECOND LEVEL').addClass('highlighted');
  }).mouseleave(function() {
      $(this).parent().closest('SECOND LEVEL').removeClass('highlighted');
  });

Thanks in advance

Answer 1

The problem is, that you use the highlight class on the complete li element. If you add highlighted only to the link it works.

$('.third').mouseenter(function() {
    $(this).parent().find('a.second').addClass('highlighted');
}).mouseleave(function() {
    $(this).parent().find('a.second').removeClass('highlighted');
});

Working example here: http://jsfiddle.net/VqcKu/7/