jQuery hide div on mouseout

I saw a lot of posts on this item, but couldn't find the right solution. Sorry if it's already answered somewhere.

What I want: I have a DIV with my menu items, that opens when the click event is fired of an href element. No开发者_StackOverfloww I wanna hide the menu, when the mouse is out of the DIV element and is not above the href element. So far I can only close it when I click the href element.

So, my jQuery looks like this:

$("#menu_opener").click(function () {
            if ($("#menudiv").is(":hidden")) {
                $("#menudiv").slideDown("slow");
            } else {
                $("#menudiv").hide();
            }
        });     

And my HTML looks like this:

<div>
<a href="#" id="menu_opener">Menu</a>
</div>
<div id="menudiv" style="position: fixed; background-color: white; display: none;">
    <a href="#" id="A1">Page 1</a><br />
        <a href="#" id="A2">Page 2</a><br /> 
    <a href="#" id="A3">Page 3</a><br />                           
</div>

Thanks in advance!

You can keep the HTML as is and simply add the following:

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

jsFiddle: http://jsfiddle.net/5SSDz/

if i understand the "is not above the href element" piece, you want the menu to stay visible when mousing off of div#menudiv, but still moused over a#menu_opener ??

if that's the case, i'd wrap the entire thing in a unqiue div and target that. and use mouseleave over mouseout.

http://api.jquery.com/mouseleave/

so, your HTML becomes:

<div id="menu_container">
  <div>
    <a href="#" id="menu_opener">Menu</a>
  </div>
  <div id="menudiv" style="position: fixed; background-color: white; display: none;">
    <a href="#" id="A1">Page 1</a><br />
    <a href="#" id="A2">Page 2</a><br /> 
    <a href="#" id="A3">Page 3</a><br />                           
  </div>
</div>

and your script would be something like:

$("#menu_opener").click(function () {
  if ($("#menudiv").is(":hidden")) {
      $("#menudiv").slideDown("slow");
  } else {
      $("#menudiv").hide();
  }
});
$("#menu_container").mouseleave(function(){
    $('#menudiv').hide();
});

Edit: Sorry misread the question the first time. I had to do this a couple of times, and I always moved the menu a pixel up so that it would overlap the href element. And then show/hide the menu if the href OR href elements are being hovered.

$("#menu_opener, #menudiv").hover(
    function(){
        $("#menudiv").show();
    },
    function(){
        $("#menudiv").hide();
    }
);

And set the top property for the menudiv's style so it moves up and is overlapping the href.

<div>
    <a href="#" id="menu_opener">Menu</a>
</div>
<div id="menudiv" style="position: fixed; top: -1px; background-color: white; display: none;">
    <a href="#" id="A1">Page 1</a><br />
    <a href="#" id="A2">Page 2</a><br /> 
    <a href="#" id="A3">Page 3</a><br />                           
</div>