Multi-Level Accordian Style Navigation

HTML

<ul id="nav">
	<li><a href="Home">Home</a></li>
	<li><a href="#">Products [+]</a>
		<ul>
			<li><a href="Products">All Products</a></li>
			<li><a href="#">Product1 [+]</a>
				<ul>
					<li><a href="Product1">Product1</a></li>
				</ul>
			</li>
			<li><a href="#">Product2 [+]</a>
				<ul>
					<li><a href="Product2">Product2</a></li>
				</ul>
			</li>                    
		</ul>
	</li>
	<li><a href="Services">Services [+]</a>
		<ul>
			<li><a href="service1">Service 1</a></li>
			<li><a href="service2">Service 2</a></li>
			<li><a href="service3">Service 3</a></li>
		</ul>
	</li>
	<li><a href="Support">Support</a></li>
	<li><a href="Contact">Contact</a></li>
</ul>

CSS

#nav li ul { display: none; }

JavaScript

$("#nav li a").on("mouseover", function (e) {
	//allow links to be followed if they don't have a sub-menu
	if ( !$(this).parent().has("ul").length ) { return; }

	//we have a sub-menu, so stop the link from being followed
	e.preventDefault();

	if(!$(this).hasClass("open")) {
		//we need to know which 'level' we're on 
		var currentLevel = $(this).closest('ul')
		$("li ul", currentLevel).slideUp(350);
		$("li a", currentLevel).removeClass("open");

		// open our new menu and add the open class
		$(this).next("ul").slideDown(350);
		$(this).addClass("open");
	} else {
		$(this).removeClass("open");
		$(this).next("ul").slideUp(350);
    }
});