So, I was using this pre-made accordion menu for a site and when it wasn't working, I decided to build my own from scratch. It, suprisingly, took very little code to write. Here it is:

The javascript:

$(document).ready(function(){
		
		/*
		JQuery accordion menu
		-------------------------------------------------------------
		Written by Tommy Cutter (http://www.tommycutter.com)
		-------------------------------------------------------------
		*/
		
		// initially hide sub-menus
		$(".drawers li ul").hide();
		
		$(".drawers").bind('mouseleave',function() {
			$(".drawer ul").slideUp();
		});

		// set hover event for menus
		$(".drawer-handle").hover(function() {
			
			// the current handle's ul should be set to active
			$(this).siblings().each(function() {
				$(this).slideDown("medium");
				$(this).addClass("active");
			});
			
			// loop through all sub-menus and show the active one
			$(".drawer ul").each(function() {
				if($(this).hasClass("active") == false)
				{
					$(this).slideUp("medium");
					$(this).removeClass("active");
				}
			});
		},function() {
			// loop through all sub-menus and hide the active one
			$(".drawer ul").each(function() {
				if($(this).hasClass("active"))
				{
					$(this).slideDown("medium");
					$(this).removeClass("active");
				}
			});
		});
		
		/* ------------------------------------------------------------- */
	});

The markup

<ul id="sitenav" class="drawers">

<li class="drawer">

<h2 class="drawer-handle open"><a href="/"><img src="/assets/images/nav-ylni.png" /></a></h2>

<ul>

<li><a href="/mission">Misson</a></li>

<li><a href="/history">History</a></li>

<li><a href="/board">Board/Committees</a></li>

<li><a href="/corporate">Corporate Member</a></li>

<li><a href="/faq">FAQ<span style="text-transform:lowercase;">s</span></a></li>

<li><a href="/membership">Membership</a></li>

<li><a href="/donations">Donations</a></li>

</ul>

</li>

<li class="drawer">

<h2 class="drawer-handle open"><a href="/events"><img src="/assets/images/nav-events.png" /></a></h2>

<ul>

<li><a href="/mission">Misson</a></li>

<li><a href="/history">History</a></li>

<li><a href="/board">Board/Committees</a></li>

<li><a href="/corporate">Corporate Member</a></li>

<li><a href="/faq">FAQ<span style="text-transform:lowercase;">s</span></a></li>

<li><a href="/membership">Membership</a></li>

<li><a href="/donations">Donations</a></li>

</ul>

</li>

<li>

<h2><a href="/news"><img src="/assets/images/nav-newsblog.png" /></a></h2>

</li>

</ul>