jQuery navigation hiding before I can click menu items

[Chrys]

I have a very simple navigation where I am using jquery to hide and show submenues on mouseover and hide them on mouseleave. When you hover over the main navigation it shows like it should but when you try to move your mouse down to click on the submenu items they hide. UGH!! Im not sure what to do about this.

I know from trial and error that it the speed that is killing it for me. When I remove the 400 it works fine but I that shouldn't affect the code that it is. Even if I add "slide inside the show function it still acts funny."
Does anyone have any ideas?

function nav(){
$('div#nav ul li').mouseover(function() {
$(this).find('ul').show(400);
});

$('div#nav ul li').mouseleave(function() {
$('div#nav ul li ul').hide();
});

$('div#nav ul li ul').mouseleave(function() {
$('div#nav ul li ul').hide();;
});
};

$(document).ready(function() {nav();});

[Chrys]

Does anyone have any ideas why the animation wont work?

[VIPStephan]

Without further looking into it I notice a syntax error:

$('div#nav ul li ul').hide();;

There is one semicolon too much.

For everything else we need to see more of your site – a link to a live example would be good. Alternatively there are sites like http://jsbin.com/, for example, where you can test your code and show it to others.

[Chrys]

I figured it out. I was trying to be too specific with the hide script and I was hiding my menu when I was leaving particular elements within the list item. LOL! This is my script and it works well now. I also added in the click to toggle part because when you are on a mobile device the menu wont hide because there is no mouseleave. :-)

function nav(){
$('div#nav ul li').mouseover(function() {
$(this).find('ul').show("fast");
});

$('div#nav ul li').mouseleave(function() {
$(this).find('ul').hide("fast");
});

$('div#nav ul li').click(function() {
$(this).find('ul').toggle("fast");
});
};