SharePoint 2010 two-level dynamic submenus (jQuery)

twoLevelDynamicSharePointMenu.css

	.s4-tn li.dynamic {
		position:relative;
	}
	.s4-tn ul.pa-extradynamic{
		position:absolute;
		top:0; left:100%;
		margin-left:0px;
		display:none;
	}
	.lt-ie9 .s4-tn ul.pa-extradynamic{
		margin-top:-1px;
	}
	.s4-tn li.dynamic:hover .pa-extradynamic, .s4-tn ul.pa-extradynamic:hover {
		display:block;
	}

twoLevelDynamicSharePointMenu.js

// you need to be using the publishing-based navigation editor to use this...
// submenu items start with '- '
function createTwoLevelDynamicMenu() {
	// get ALL drop-down menu items
	var dropDownItems = jQuery('.s4-tn li.dynamic');
	
	// tag submenu items as submenu items  
	dropDownItems.filter(':contains("- ")').addClass('pa-submenuitem');
	
	// move submenu items into a dynamically created submenus 
	dropDownItems.each(function(i,val) {
		// hi, i'm the menu item
		var $me = jQuery(this);
		if ($me.hasClass('pa-submenuitem')) {
			// i don't need to tell you i'm a submenu item again, do i?!
			this.innerHTML = this.innerHTML.replace('- ','');
			// look back at the nav items before me, until you find my parent	
			var $parent = $me.prev(':not(.pa-submenuitem)');
			// my parent holds me in a submenu, so make sure it has one! 
			if(! $parent.hasClass('pa-haschildren')) {
				$parent.addClass('pa-haschildren').append('<ul class="pa-extradynamic dynamic"></ul>');
			}
			// I give up and go to live with my $parent :)
			$me.remove().appendTo($parent.children('ul'));
		}
	});
}