$(document).ready(function() {
	// hover in
	$("li.mm").hover( function(){
		// initialize default menu width
		initwidth = $(this).width();
		// get the title inside <a>
		description = $(this).children("a").attr("title");
		// start the animation
		$(this).stop().animate({width: "140"},{queue:false, duration:"fast" });
		// remove previously <p>
		$(this).children("div").remove();
		// create <p> and attach title into it
		$(this).find("a").after("<div>"+description+"</div>")
		// create animation to make it looks good
		$(this).children("div").stop().animate({ opacity: "show" }, {queue:false, duration:"fast"});
	// hover out
	},function(){
		// animate it to the basic width
		$(this).stop().animate({width: initwidth},{queue:false, duration:"fast"});
		// fade out animation
		$(this).children("div").stop().animate({ opacity: "0" }, {queue:false, duration:"fast"});
	});
});