mouseleave 2 elements show/hide 1 element?
<p>I have 2 elements a <code>&lt;ul&gt;</code> and a <code>&lt;div&gt;</code>.</p>

<p>If I hover over the div I want the ul to appear and when I mouseleave the div I want to check if the mouse is over the ul, if not I want to hide the ul again.</p>

<p>This is my code it works in Chrome and safari but not in Firefox does anyone know what might cause this bug?</p>

<pre><code>$('.footer')
    .mouseenter(function() {
        $('ul#date').fadeIn();
    })
    .mouseleave(function(){
        $('ul#date').hover(
            function() {
                $('ul#date').mouseleave(function() {
                    $('.footer').hover(
                        function() {
                            return;
                        },
                        function() {
                            $('ul#date').fadeOut();
                        }
                    );
                });
            },
            function() {
                $('ul#date').fadeOut();
            }
        );
    });
</code></pre>

<p><strong>EDIT</strong>
HTML markup</p>

<pre><code>&lt;div id="main-wrapper"&gt;

    &lt;div class="clearfix" id="main"&gt;

        &lt;div class="column" id="content"&gt;

            &lt;div class="section"&gt;

                &lt;h1 id="page-title" class="title"&gt;Titletest&lt;/h1&gt;

                &lt;div class="region region-content"&gt;

                    &lt;div class="block" id="block-system-main"&gt;

                        &lt;div class="content"&gt;

                            &lt;div typeof="sioc:Item foaf:Document" class="node" id="node-13"&gt;

                                &lt;ul id="date" style="display: none;"&gt;

                                &lt;/ul&gt;

                            &lt;/div&gt;&lt;!-- /.node --&gt;

                        &lt;/div&gt;

                    &lt;/div&gt;&lt;!-- /.block --&gt;

                &lt;/div&gt;&lt;!-- /.region --&gt;

            &lt;/div&gt;

        &lt;/div&gt;&lt;!-- /.section, /#content --&gt;

    &lt;/div&gt;

&lt;/div&gt;

&lt;div class="footer"&gt;&lt;/div&gt;
</code></pre>

<p><strong>SOLUTION</strong></p>

<p>Ok, thanks to crowicked I came to my desired effect, this is the code for the people who are interested.</p>

<pre><code>$('.footer').hover(
    function()
    { 
        $('ul#date').stop();

        if ($('ul#date:hidden'))
        { 
            $('ul#date').fadeIn();
        }

    }
);

$('ul#date').mouseleave( function(){ $('ul#date').fadeOut(); });
</code></pre>
