Attempting to create a quick jQuery drop down menu
-
18-09-2019 - |
Question
am not sure if I'm doing this right, but I'm trying to create a simple drop down menu in jQuery. I basically want a div (with links) to appear once the menu item is hovered over..
The Menu:
<ul id="mainlevel">
<li><a href="#" class="mainlevel_home" ><span>Home</span></a></li>
<li><a href="#" class="mainlevel_feature-writers" ><span>Feature Writers</span></a></li>
<li><a href="#" class="mainlevel_fantasy-killed-my-hsc" ><span>Fantasy Killed My HSC</span></a></li>
</ul>
The Hidden Div:
<div class="subMenu"><a href="/feature-writers/jd-ormsby" class="sublevel jd-ormsby"><span>J.D. Ormsby</span></a></div>
The jQuery:
$(".mainlevel_feature-writers").hover(function(){
$(".subMenu").fadeIn("slow");
}, function() {
$(".subMenu").fadeOut("slow");
});
Now, this fades in the hidden div and fades it out fine, but - how do I stop it from fading out if someone hovers on something inside the newly shown div?
Sorry if this is a really obvious question.. I am still learning! :)
Solution
I think you need to separate the handling of mouseover
and mouseout
events.
Presumably, you want the mouseover
handler to be attached to the "top level" menu element, and the mouseout
handler to be attached to the hidden "dropdown" div (with some state code to manage conflicts).
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow