jquery menu, hover and display:none

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 "dis开发者_如何转开发play:none".

How can I achieve this?

If you read the jQuery api more carefuly you will see that the hover function can take handle two events http://api.jquery.com/hover/

$("document").ready(function() {
  $("#menuSolutions a").hover(function () {
      $("#menuSolutions").addClass("menuHover");
      $("#submenuSolutions").show("3000");
  },function() {
    $("#menuSolutions").removeClass("menuHover");
    $("#submenuSolutions").hide("3000")});
});​

This will work only if your menu is a suckerfish menu.

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.