Question

I have this menu http://jsbin.com/useqa4/3

The hover I think works correct, but what I want is the normal: when the user’s cursor isn’t on the “Solution” item or on the submenu then I want the div #submenuSolutions to return in “display:none”.

How can I achieve this?

Answer 1

See Demo

---

Just added this code to hide it back when mouse leaves it:

  $("#submenuSolutions").mouseleave(function(){
    $(this).hide();
  });

Since submenuSolutions is the id of your panel, you can use the mouseleave event which triggers when mouse leaves the area of element specified.