/*
$(document).ready(function() {
	// hover in
	$("li").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: "220"},{queue:false, duration:"fast" });
		// remove previously <p>
		$(this).children("p").remove();
		// create <p> and attach title into it
		$(this).find("a").after("<p>"+description+"</p>")
		// create animation to make it looks good
		$(this).children("p").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("p").stop().animate({ opacity: "0" }, {queue:false, duration:"fast"});
	});
});
*/
$(document).ready(function() {
// initialize default menu width as a global
initwidth=$("li").width();
// hover in function
$("li").hover( function(){
// get the title inside 
description = $(this).children("a").attr("title");
// start the animation
$(this).stop().animate({width: "200px"},{queue:false, duration:"fast" });
// remove previously
$(this).children("p").remove();
// create and attach title into it
$(this).find("a").after("<p>"+description+"</p>")
// create animation to make it looks good
$(this).children("p").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("p").stop().animate({ opacity: "0" }, {queue:false, duration:"fast"});
});
});