Question

I have a menu that looks like this:

<ul class="menu">
  <li><a href="#">zing</a></li>
  <li>
    <a href="#">page</a>
    <ul>
      <li>foo</li>
      <li>bar</li>
    </ul>
  </li>
</ul>

I’d like the sub menu to fadeIn when I hover over the page link.
This is my code so far but for some reason it’s not working and I don’t think this is the correct way to achieve this anyways:

$('.menu li a:nth-child(2)').hover(function(){
    $('.menu li ul').fadeIn(150);
}, function(){
    $('.menu li ul').fadeOut(150);
}); 

Anyone know how I can reach my goal according to best standards to make the submenu of the 2nd li to appear when I hover over page?

Answer 1

It would probably be a good idea to have your hovers only apply to menus that have a submenu. You could do something like this:

$('.menu > li > a').filter(function(){
    if( $(this).siblings('ul').length ){ return true; }
}).hover(
    function(){ $(this).siblings('ul').fadeIn(150); }
    ,function(){ $(this).siblings('ul').fadeOut(150); }
);