I don't know much about jQuery but am beginning to dabble in it. I built a jQuery sliding subcategory menu from a tutorial. Through my restructuring, I need the sub-menu to sit longer on mouseout so the user has time to pick a subcategory. Seems simple but with all my scouring throughout the interwebz and trial/error I cannot seem to get the damn sub-menu to stay still.

I am posting a link to the tutorial if needed. I will post the javascript itself along with a zip of the site files needed for debugging (zip was to large for Coding Forums attachment, I linked to my G-Docs account).

Thanks in advance for helping a newbie out.


Link to Source Files:

Current Javascript:


	//Hide SubLevel Menus
	$('#nav-container ul li ul').hide();

	//OnHover Show SubLevel Menus
	$('#nav-container ul li').hover(
			//Hide Other Menus
			$('#nav-container ul li').not($('ul', this)).stop();

			//Remove the Border
			$('ul li.arrow', this).css('border-bottom', '0');

			// Show Hoved Menu
			jQuery('ul', this).stop(true, true).slideDown();

		$('#nav-container ul li').mouseout(
			// Hide Other Menus
			jQuery('ul', this).stop(true, true).slideUp()