[jQuery] Show/Hide Menu

[jQuery] Show/Hide Menu


I have a menu that is activated on mouseover a link. The menu is a
hidden div which appears. My problem now is how to remove/hide that
div when a user move their mouse off of the menu. I have tried adding
a mouseout event to the div, but because there are child divs inside
that div, any mousing over them hides the parent div as well, which I
don't want. I only want it to hide if the mouse is outside the parent
div, not anywhere within it.
    // ----- Show Artists Menu When Link moused over ------
    $('a#Artists').mouseover(function() {
        // Show Our Artists Box
        $('#artistsBox').fadeIn('slow');
    });//end mouseover
    // ----- Add Stuff When Link moused over ------
    $('#artistsBox').mouseover(function() {
        // Add a mouse out on our box
        $('#artistsColumns').mouseout(function() {
            // Hide Our Artists Box
            $('#artistsBox').fadeOut('slow');
        });//end mouseover
    });//end mouseover
<div id="artistsBox" style="display:none;">
<div id="artistsColumns">links and stuff in here</div>
</div>
Because the mouseout event is attatched to artistsBox, mousing over
artistsColumns hides the div as well, which I don't want.
Any ideas?