jQuery(document).ready
(
	function()
	{
		jQuery('#nav li').hover
		(
			function()
			{
				// show this sub-menu
				
				var initial_width = jQuery(this).find( 'ul:first' ).width(); 
				
				jQuery(this).find( 'ul:first' )
				.
				css
				(
					{
						width: '0px'
					}
				)
				.
				animate
				(
					{
						width: initial_width + 'px'
					}
					,
					250
					,
					'linear'
				)
				;
			}
			,
			function()
			{
				// stop all animations that are in action now
				
				jQuery(this).find( 'ul:first' ).stop( true, true );
				
				// hide this sub-menu
				
				jQuery(this).find( 'ul:first' )
				.
				hide()
				;
			}
		)
		;
	}
)
;