Problem with mouseout function when showing and hiding a div
<p>I have a navigation item which, when clicked, shows a hidden div. I'm having trouble getting the div to hide when you mouseout of the div. I would like it to hide when the user's mouse leaves the bounds of the div. Here is the jquery:</p>

<pre><code>$(document).ready(function () {
    $('li#locations a').click( 
        function(){ 
            $('#locationsSuperNav').slideDown(); 
        }
    ); 
    $('#locationsSuperNav').mouseout( 
        function(){ 
            $('#locationsSuperNav').slideUp(); 
        }
    );
}); 
</code></pre>

<p>There are links and images inside the #locationsSuperNav div. When the cursor hovers over those elements, the div will hide. Is there any way to prevent this??</p>

<p>Thanks in advance for any help.</p>
