title: How to close a list menu on mouseout using jQuery
body: <p>I have the following scenario:</p>
  
  <pre><code>&lt;div class="dropMenuWrapper_content"&gt;
  &lt;img src="images/dropMenu.gif" class="menu_head_content" /&gt;
  &lt;ul class="menu_body_content scroll-pane" id="SmallDropDown"&gt;
    &lt;li&gt;&lt;a class="modalWindow cboxElement" href="http://mysite.com/service/0.aspx"&gt;1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class="modalWindow cboxElement" href="http://mysite.com/service/1.aspx"&gt;2&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class="modalWindow cboxElement" href="http://mysite.com/service/2.aspx"&gt;3&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class="modalWindow cboxElement" href="http://mysite.com/service/3.aspx"&gt;4&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class="modalWindow cboxElement" href="http://mysite.com/service/4.aspx"&gt;5&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class="modalWindow cboxElement" href="http://mysite.com/service/5.aspx"&gt;6&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class="modalWindow cboxElement" href="http://mysite.com/service/6.aspx"&gt;7&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class="modalWindow cboxElement" href="http://mysite.com/service/7.aspx"&gt;8&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class="modalWindow cboxElement" href="http://mysite.com/service/8.aspx"&gt;9&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class="modalWindow cboxElement" href="http://mysite.com/service/9.aspx"&gt;10&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class="modalWindow cboxElement" href="http://mysite.com/service/10.aspx"&gt;11&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class="modalWindow cboxElement" href="http://mysite.com/service/11.aspx"&gt;12&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class="modalWindow cboxElement" href="http://mysite.com/service/12.aspx"&gt;13&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class="modalWindow cboxElement" href="http://mysite.com/service/13.aspx"&gt;14&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class="modalWindow cboxElement" href="http://mysite.com/service/14.aspx"&gt;15&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class="modalWindow cboxElement" href="http://mysite.com/service/15.aspx"&gt;16&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class="modalWindow cboxElement" href="http://mysite.com/service/16.aspx"&gt;17&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p></p>
  
  <p>When I click on the dropMenu image, the list opens up to show me a drop down menu using jQuery. All's working well except when I move off of either the image or the list itself, I need it to close the menu. I already have my function to close the menu when you click on the image again, but I need it close when you move off of the image or the list.</p>
  
  <p>I thought that I could use the dropMenuWrapp_content div to as this stretches with the content when it is open so that when you mouse out of that div it will close but it's very buggy.</p>
  
  <p>In Flash, I would setup a hitTest to see where the mouse is and if it's no longer on that area, the drop menu would close.</p>
  
  <p>Is there a better way for me to check this using jQuery?</p>
  
  <p>Many thanks!</p>