hiding a div when the mouse is a certain distance away from that div

I have a div on a page which is toggled by an item in a navigation bar. What I'd like to do is have that div hide when the user's mouse gets a certain distance away from the div's outer boundry.

Here's some example code:

<ul>
    <li>This is link A</li>
    <li>This is link C</li>
    <li id="trigger">This is link D</li>
</ul>

<div id="megaMenu">This is where the menu content goes</div>

So, when the user mouses over the li#trigger, the mega menu slides down. What I'd like to do is have the #megaMenu slide up when the user's mouse is 50px outside the bounds of the div. Any suggestions??

Here's the core jQuery I was using:

$(document).ready(function () {

    $('li#locations a').hover(function () {
        $('#locationsSuperNav').slideDown();
    });

    $('.superNavClose').hover(function () {
        $('#locationsSuperNav').slideUp('fast').removeClass("open");
    });

});

The second piece of the code (.superNavClose) was an attempt at putting a hot spot around the menu to close it when the user's mouse hits it. There are a bunch of links inside the mega menu so I need to keep it open while the user is working with it. I was thinking that closing the div when th开发者_Python百科e mouse is a certain distance away would work pretty good. Thanks in advance for any suggestions!

You could use the handlerOut callback from the hover function

$(document).ready(function(){

    $('li#locations a').hover(function(){   
        $('#locationsSuperNav').slideDown();
        }, function(){
            $('#locationsSuperNav').slideUp('fast').removeClass("open");
        }); 

});