mouseleave for two elements to hide another div
<p>I need my submenu div to only disappear when both li item and the submenu itself are not hovered.</p>

<p>CSS solution will not work here as I need to use first-child hover and the submenu div is not a child element.</p>

<p>I have searched the forums but can't find a solution for this when the submenu is not a child of the li item.</p>

<p>HTML:</p>

<pre><code>&lt;ul id="top-menu"&gt; 
&lt;li&gt;item 1&lt;/li&gt;
&lt;li&gt;item 2&lt;/li&gt;
&lt;li&gt;item3&lt;/li&gt;
&lt;/ul&gt;

&lt;!-- somewhere else in DOM (not directly after or child of menu) --&gt;

&lt;div id="#menu1_expansion"&gt;
sub menu1 content
&lt;/div&gt; 
</code></pre>

<p>jQuery:</p>

<pre><code>        $(document).ready(function () {
    $('#top-menu li:nth-child(1)').hover(
    function()
    { 
        $('#menu1_expansion').stop();

        if ($('#menu1_expansion:hidden'))
        { 
            $('#menu1_expansion').show();
        }

    }
);
$('#menu1_expansion').mouseleave( function(){ $('#menu1_expansion').hide(); });
});
</code></pre>

<p>CSS:</p>

<pre><code>#menu1_expansion {display:none; position:absolute;}
</code></pre>

<p>Currently this gets the submenu to appear on li item hover and the  submenu disappears when mouseleave but I need the submenu to hide when both it AND the li item is mouseleave - can anyone advise how to do it? thanks.</p>
