hiding a div when the mouse is a certain distance away from that div
<p>I have a div on a page which is toggled by an item in a navigation bar. What I'd like to do is have that div hide when the user's mouse gets a certain distance away from the div's outer boundry.</p>

<p>Here's some example code:</p>

<pre><code>&lt;ul&gt;
&lt;li&gt;This is link A&lt;/li&gt;
&lt;li&gt;This is link C&lt;/li&gt;
&lt;li id="trigger"&gt;This is link D&lt;/li&gt;
&lt;/ul&gt;

&lt;div id="megaMenu"&gt;This is where the menu content goes&lt;/div&gt;
</code></pre>

<p>So, when the user mouses over the li#trigger, the mega menu slides down. What I'd like to do is have the #megaMenu slide up when the user's mouse is 50px outside the bounds of the div. Any suggestions?? </p>

<p>Here's the core jQuery I was using:</p>

<pre><code>$(document).ready(function(){

$('li#locations a').hover(function(){   
$('#locationsSuperNav').slideDown();
}); 

$('.superNavClose').hover(function(){
$('#locationsSuperNav').slideUp('fast').removeClass("open");
}); 

});
</code></pre>

<p>The second piece of the code (.superNavClose) was an attempt at putting a hot spot around the menu to close it when the user's mouse hits it. There are a bunch of links inside the mega menu so I need to keep it open while the user is working with it. I was thinking that closing the div when the mouse is a certain distance away would work pretty good. Thanks in advance for any suggestions!</p>
