How to detect mouseout of two elements in jQuery?
<p>Trying to make a simple jquery drop down here, here's my code so far:</p>

<p>HTML:</p>

<pre><code>    &lt;ul id="nav"&gt;
        &lt;li&gt;
            &lt;a href=""&gt;Cats&lt;/a&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href=""&gt;Tigers&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=""&gt;Lions&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=""&gt;Leopards&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;
            &lt;a href=""&gt;Dogs&lt;/a&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href=""&gt;Wolves&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=""&gt;Dingos&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=""&gt;Dholes&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;            
    &lt;/ul&gt;
</code></pre>

<p>CSS:</p>

<pre><code>ul#nav { border: 1px solid #ccc; overflow: hidden; background: #eee; padding: 0; }
ul#nav li { display: block; float: left; border-right: 1px solid #ccc; padding: 10px 20px; }

ul#nav li ul { display: none; border: 1px solid #ccc; overflow: hidden; position: absolute; background: #eee; width: 100px; padding: 0; margin: 10px 0 0 -20px; border-bottom: none; }
ul#nav li ul li { display: block; float: left; width: 100%; border-bottom: 1px solid #ccc; }
</code></pre>

<p>jQuery:</p>

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

    $('ul#nav &gt; li &gt; a').mouseover(function() {
            $(this).parent().find('ul').slideDown('fast');
    });

    $('ul#nav &gt; li &gt; a').mouseout(function() {
            $(this).parent().find('ul').slideUp('fast');
    });

});
</code></pre>

<p>Problem is now when the user no longer hovers over the nav link the drop down ul goes away. I need it to go away if the user is not hovering over the nav link <strong>OR</strong> hovering over the drop down ul. How to do this?</p>
