Question

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

Answer 1

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.