// --------------------------------------------------
// Multi level navigation using jQuery
// by Aaron Meder, www.telltec.ch
//
// With a little help of my friend Pierre, thanks!
// --------------------------------------------------


$(document).ready(

	function() {
		
		// hide second level navs by default
		$("#mainnav .sub-menu").css("visibility", "hidden");
				
		
		// when hovering the main nav
		// TODO change this to the path to the li element inside your main nav
		$("#mainnav > div > div > ul > li").hover(
		
			// on hover
			function() {
				
				// if menu has a sub menu	
				if ($(this).find(".sub-menu").length > 0){
								
					$("#subnav").css("visibility", "visible");
					$(this).find(".sub-menu").css("visibility", "visible");
				}
			}, 
			
			// when cursor leaves
			function() {
								
				$("#subnav").css("visibility", "hidden");
				$("#mainnav .sub-menu").css("visibility", "hidden");
			}
		
		);
		
	}

);

Assumes that you have got a #mainnav around your menu. Works nicely with wp_nav_menu inside.

Wordpress optimized two level nav

javascript, js, wordpress, navigation, jquery

jQuery