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
li
so that you can freely move around the drop-down. – ayyp