Selecting Nested Div In A Li Element

The user hovers the mouse over a menu item, i then want to show the submenu to the user. I want to use Jquery to show and hide the sub-nav-conatiner div. the only trouble is my jQu

Solution 1:

Use this.

$('.sub-menu-header').mouseover(function () {
    $(this).find('div.sub-nav-container').show();
});

You can simplify the code, however - no need for separate mouseover and mouseleave handlers. Just use .hover() with a single function argument:

$('.sub-menu-header').hover(function () {
    $(this).find('div.sub-nav-container').toggle();
});

Solution 2:

$('.sub-menu-header').mouseover(function () {
 $(this).children(".sub-nav-container").show();
});

Solution 3:

$('.sub-menu-header').mouseover(function () {
    $('.sub-nav-container', this).show();
});