mouseleave 2 elements show/hide 1 element?

Question

I have 2 elements a <ul> and a <div>.

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.

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

$('.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();
            }
        );
    });

EDIT HTML markup

<div id="main-wrapper">

    <div class="clearfix" id="main">

        <div class="column" id="content">

            <div class="section">

                <h1 id="page-title" class="title">Titletest</h1>

                <div class="region region-content">

                    <div class="block" id="block-system-main">

                        <div class="content">

                            <div typeof="sioc:Item foaf:Document" class="node" id="node-13">

                                <ul id="date" style="display: none;">

                                </ul>

                            </div><!-- /.node -->

                        </div>

                    </div><!-- /.block -->

                </div><!-- /.region -->

            </div>

        </div><!-- /.section, /#content -->

    </div>

</div>

<div class="footer"></div>

SOLUTION

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

$('.footer').hover(
    function()
    { 
        $('ul#date').stop();

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

    }
);

$('ul#date').mouseleave( function(){ $('ul#date').fadeOut(); });

Answer 1

Why not enclose the ul#date inside the .footer element and just use the .hover() function on the .footer to show/hide the <ul>?

EDIT: Added the drupal tag. Try something like this:

$('.footer').hover(
   if ($('ul#date').is(':hidden')) {
      function(){
         $('ul#date').fadeIn();
      }
   }
);

$('ul#date').mouseleave( function(){
   $('ul#date').fadeOut();
});

Answer 2

Shouldn't it be this?

$('.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();         
        }
    );
});