I had a client of mine need to show and hide sub navigation lists depending on the main-menu li hover event. You can do all sorts of animations too, but this code is simple show and hide to demonstrate it. Below is the code:
$(document).ready(function() { $("ul#menu-main > li").hover( function () { $("#menu-main li.current-menu-item > ul").hide(); $("#" + $(this).attr("id") + " ul.sub-menu").show(); }, function () { $("#" + $(this).attr("id") + " ul.sub-menu").hide(); $("#menu-main li.current-menu-item > ul").show(); } ); $("#menu-main ul.submenu").hide(); $("#menu-main ul.current-menu-item ul").show(); });