A simple script that allows the native Magento menu to fade in and out.

mage-menu-fade.js

/**
  * A simple jQuery-based magento fade script. It includes stopping
  * on multiple hover events and forcing of the menu to show  once
  * the animation is complete. Additionally, we test to see if
  * the browser supports the opacity property, if not then regular
  * magento script will be used and no fade will be seen.
  * @author Dennis Thompson <http://www.atomicpages.net/>
  * @copyright AtomicPages LLC 2013
  * @license MIT <http://opensource.org/licenses/MIT>
  */

var $j = jQuery.noConflict(); // necessary to avoid conflict with prototype
$j(document).ready(funtion() { // is the dom ready?
	// console.log('DOM is ready!');
	if( $j.support.opacity) { // does the browser support opacity?
		if( !$j('#nav li').is(':empty') || $j('#nav li').hasClass('parent') ) { // is #nav li not empty OR does it have the class called parent?
			$j('#nav li ul').hide(); // if so, hide it
			$j('#nav li a').hover(
				function() { // on mouseover
					$j('#nav li ul').stop().fadeIn(400); // fade in
					$j('#nav li ul').promise().done(function() { // am I done? Yes.
						$j('#nav li ul').show(); // show me
						$j('#nav li ul').css('opacity', 1); // set opacity: 1;
					});
				},
				function() { // on mouseout
					$j('#nav li ul').stop().fadeOut(400); // fade out
					$j('#nav li ul').promise().done(function() { // am I done? Yes.
						$j('#nav li ul').hide(); // hide me
					});
				}
			);
		}
	}
});