I'm making an animated submenu with javascript. and everything is working fine so far. But as i'm still learning, I can not find the solution for displaying the submenu.

my code is like this:

<script type="text/javascript">



$(document).ready(function() {
$('.nsub').hide(); // hide sub-navigation items by default

$('.nitem a').live('mouseover , mouseout', function(e){
e.preventDefault()



$(this).parent().next('.nsub').slideToggle('slow') ;




if($(this).parent().next('.nsub').is(':hidden')) {
$(this).addClass("CurrentlySelected");

} else {
$(this).removeClass("CurrentlySelected");
}




});


});

</script>


the "nsub" stands for the submenu, and the "nitem" for a menu button.
as you can see in the code, the submenu pops open when i move the mouse over a menubutton. but immediately dissapears when I move the cursor away.

what I want is, that the submenu stay's visible ofcourse while i'm navigating in the menu. But I want it to dissapear when I clicked a button, OR move my cursor away from the menu.
Also only 1 submenu should be open at a time (I have more than one button with a submenu)

I hope this is all clear, and I hope someone can help me fast.

thank you!!