Question

I’m a bit confused regarding jquery and selectors.

on this site http://pelloponisos.telesto.gr/ i’m building a main menu.
All I want is to make the immediate sub-menu(2nd child of every li in the main menu) appear on mouseover and hide on mouseout.

the jquery code to make the menu work on mouseover is:

$("#access ul li").mouseover(function(){
    $(this).find(':nth-child(2)').show();
    }).mouseout(function(){
        $(':nth-child(2)',this).hide();
    });

but as you can see the code matchess every second child and thus expands the all the submenus at once.

Can somebody please point out what am I missing?

Answer 1

You can try using direct child selector:

$(this).find('> :nth-child(2)').show();

or:

$("#access ul li").hover(function(){
    $('> :nth-child(2)', this).toggle();
});