Jquery Hover animate issue

I am using jquery to create a hover effect on my nav menu. My jquery is as follows:

$(".hoverMenu").css({"opacity":"0"});

        $("#menu-nav li:nth-child(2) a").hover(function(){
            $(".hoverMenu").stop().show().animate({
                top: '88',
                opacity: '1'
            }, 500);
        }, function(){
            $(".hoverMenu").stop().animate({
                top: '-247',
                opacity: '0'
            }, 500);
        });

When you hover over the second menu item, the div with a class of hoverMenu animates down, and increases its opacity until its fully visible. The problem I am having is after the hoverMenu animates down, I want to be able to hover over the individual links within the hoverMenu. Because I am hovering off the menuNav (the hovermenu is quote big with a series of list items and anchors), the hoverMenu animates back up. I want to modify my jquery so when you hover over .hovermenu, it will not animate back off.

If that doesnt make sense, I will throw together a jsfiddle, but I feel like this is a fairly common problem. TO summarize, because I am hovering off the #menu-nav, the hoverMenu animates up; however开发者_高级运维 I would like the hoverMenu to stay put until I hover off BOTH the hoverMenu and #menu-nav

Make hoverMenu a child of #menu-nav, and when you hover on it, it still counts as hovering over #menu-dav since it's a child.

It is a fairly common problem and the approach I prefer is to simply add the sub-menu as a child of the main item. In this way, the sub-menu is part of the item with the hover on it, so your mouse entering the sub-menu will not trigger the leave event. This generally works since the sub-menu is usually absolutely positioned anyway, so it's trivial to add it as a child of the other item.