title: jQuery hide div on mouseout
body: <p>I saw a lot of posts on this item, but couldn't find the right solution. Sorry if it's already answered somewhere.</p>
  
  <p><strong>What I want:</strong>
  I have a <code>DIV</code> with my menu items, that opens when the <code>click</code> event is fired of an <code>href</code> element.
  Now I wanna hide the menu, when the mouse is out of the <code>DIV</code> element and is not above the <code>href</code> element. So far I can only close it when I click the <code>href</code> element.</p>
  
  <p>So, my jQuery looks like this:</p>
  
  <pre><code>$("#menu_opener").click(function () {
              if ($("#menudiv").is(":hidden")) {
                  $("#menudiv").slideDown("slow");
              } else {
                  $("#menudiv").hide();
              }
          });     
  </code></pre>
  
  <p>And my HTML looks like this:</p>
  
  <pre><code>&lt;div&gt;
  &lt;a href="#" id="menu_opener"&gt;Menu&lt;/a&gt;
  &lt;/div&gt;
  &lt;div id="menudiv" style="position: fixed; background-color: white; display: none;"&gt;
      &lt;a href="#" id="A1"&gt;Page 1&lt;/a&gt;&lt;br /&gt;
          &lt;a href="#" id="A2"&gt;Page 2&lt;/a&gt;&lt;br /&gt; 
      &lt;a href="#" id="A3"&gt;Page 3&lt;/a&gt;&lt;br /&gt;                           
  &lt;/div&gt;
  </code></pre>
  
  <p>Thanks in advance!</p>