Firing the mouseleave event only when the mouse moves in a vertical direction
<p>I have a ul which functions as the main navigation. I have one li inside that ul which, when hovered on, slides down a hidden div with a bunch of information. This div appears right below the main nav. I would like to have the div hide itself if the user moves their mouse vertically, outside the main nav. I need it to stay if they mover their mouse over the div so they can click links located there.</p>

<p>Here's some of the code:</p>

<pre><code>&lt;ul&gt;
&lt;li&gt; &lt;a href="#"&gt;item one &lt;/a&gt;&lt;/li&gt;
&lt;li id="locations"&gt; &lt;a href="#"&gt;item two &lt;/a&gt; &lt;/li&gt;       
&lt;li&gt; &lt;a href="#"&gt;item three &lt;/a&gt; &lt;/li&gt;
&lt;/ul&gt;

&lt;div id="superNav"&gt;  div content is here &lt;/div&gt;
</code></pre>

<p>Here is the current jQuery:</p>

<pre><code>$('li#locations a').hover(function(){
$('#locationsSuperNav').slideDown();
}); 
$('#locationsSuperNav').mouseleave(function(){
$(this).slideUp();
}); 
</code></pre>

<p>Is there any way to use a y coordinate to also trigger the mouseleave event?</p>

<p>Thanks in advance for any help.</p>
