Show / Hide using mouseover and jQuery
<p>I have this block of code. The idea is, that when I <code>mouseover</code> <code>li#anchor</code>, previously hidden <code>ul#seeMore</code> should show up.</p>

<pre><code>jQuery(document).ready(function(){
    jQuery("li#anchor").mouseenter(function() {
        jQuery('ul#seeMore').css("display","block");
    });

    jQuery("li#anchor").mouseleave(function() {
        setTimeout( function(){
            jQuery('ul#seeMore').css("display","none");              
        },1000);
    });
})
</code></pre>

<p>The problem is that I also want that the second <code>mouseleave</code> function should not happen if I am still hovering the <code>ul#seeMore</code></p>

<p>Or, probably the question should be: How can I ascertain if I'm not hovering the <code>ul#seeMore</code>?</p>

<p>I tried to change <code>jQuery("li#anchor").mouseleave(function() {</code> to <code>jQuery("ul#seeMore").mouseleave(function() {</code> but it seems this is not very stable.</p>
