Hi, i am a total newbie to jquery.
I have an accordion menu for a project that keeps bouncing as you rollover the submenu links.
If i only have the top level and 1 or 2 of the sub menu it works, but if there is too much or if i add a 3rd level it goes crazy.

Here is my code:
Code:
function mainMenu ()
{

	jQuery("nav ul li").hover(function () 
	{
	
		jQuery(this).find("ul").fadeIn(0).slideUp(0).slideDown(200);
	
	}, function () 
	{
		
		jQuery(this).find("ul").slideUp(200);		
	
	});
	
	jQuery("nav ul li").each(function () 
	{
	
		if (jQuery(this).find("ul").size() > 0) jQuery(this).find("a").filter(":first").append(" +");
	
	});

}
HTML (this is a wordpress theme, so the html just pulls from the default wordpress custom nav)

Code:
<nav>
		
			<?php wp_nav_menu(array("location" => "primary")) ?>
			
			<div id="mobile_menu_skin">
				
				<?php _e("Navigate To", "cluster") ?>…
				
				<span>+</span>
				
				<div class="clear"></div>
				
			</div>

		<div class="clear"></div>				
		
		</nav>
This is a video that someone use using the same wordpress theme took showing the problem.

http://youtu.be/lgbxWbmzbaw

So I am thinking that if the code is changed to a click action instead of a hover action this would work better??

Any help?