JQuery Hover menu - disappears when falling over child menu

Question

So, I created a simple little slope that uses the class from the link to show the div below it.

The show / hide function works fine, but I can’t figure out how to install it so that if the mouse is above the div, it will not hide. I tried using (this) and .hover, without success.

Here is my code:

$(document).ready(function() { // hide all dropdown $("#dropdown1").hide(); //hover show dropdown $(".menu-level-one").hover( function () { $("#dropdown1").show(); }, function () { var postTimer1 = setTimeout(function(){ $("#dropdown1").hide(); }, 1000); } ); }); 

Answer 1

You can use clearTimeout(postTimer1) to stop timer execution. Therefore, if the user hovers over #dropdown1 , clear the timer.

Maybe something like this:

 $(document).ready(function() { var hideTimer = null var dropdown = $("#dropdown1", this) var menu = $(".menu-level-one", this) dropdown.hide(); $([dropdown[0], menu[0]]).hover( function() { if (hideDropdownTimer) clearTimeout(hideDropdownTimer); dropdown.show(); }, function() { if (hideDropdownTimer) clearTimeout(hideDropdownTimer); hideDropdownTimer = setTimeout(function() { dropdown.hide() }, 300) } ) })