Jquery parent div hide logic hides child dropdown menu on mouseout

Question

I have a row of divs with the class "itemcontainer" that show a group of action icons on mouseover. One of the action icons has a dropdown menu with an absolute position that shows on mouseover. The challenge I am trying solve is the fact the dropdown menu spans over the item container and when you move the mouse down to the dropdown menu, the itemcontainer mouseout logic kicks in and hides the dropdown menu and item container. Any suggestions, jquery code below.

  $(".itemcontainer").live("mouseover", function () {
        $(this).addClass("selecteditemcontainer");
        $(this).find(".actioncontainer").show();

    }).live("mouseout", function () {
            $(this).removeClass("selecteditemcontainer");
            $(this).find(".actioncontainer").hide();

    });

    $(".dropdown").live("mouseover", function () {
        $(this).find(".submenu").slideDown("fast").show();
        $(this).parent().mouseout(function () {
        }, function () {
            $(this).parent().find(".submenu").slideUp('fast'); //When the mouse hovers out of the subnav, move it back up  
        });
    });

Answer 1

Instead of the mouseover and mouseout events, if the elements are children, you want the mouseenter and mouseleave events, which won't fire when going from parent to child.

From the mouseleave docs:

The mouseleave event differs from mouseout in the way it handles event bubbling. If mouseout were used in this example, then when the mouse pointer moved out of the Inner element, the handler would be triggered. This is usually undesirable behavior. The mouseleave event, on the other hand, only triggers its handler when the mouse leaves the element it is bound to, not a descendant. So in this example, the handler is triggered when the mouse leaves the Outer element, but not the Inner element.