jQuery Hover Menu - When hovering over child - menu disappears

Question

So I created a simple little hover, that uses a class from a link to show a div underneath.

The show/hide works fine, but I can\'t figure out how to set it so that i

Answer 1

You can use clearTimeout(postTimer1) to stop the timer from executing. So 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)
    }
  )
})