<ul class="menu">
	<li><a title="للرجوع للرئيسية اضغط هنا" href="http://www.fez-soft.net">الرئيسية</a></li>
	<li><a title="نرحب بأي اتصال ، أو نقد أو نصيحة أو دعم" href="http://www.fez-soft.net/contact">اتصل بنا</a></li>
	<li><a title="أخوكم محمد شاطر" href="http://www.fez-soft.net/about-me">Fez-Soft</a></li>
</ul>

.menu2 {
	margin: 100px 0 0;
	padding: 0;
	list-style: none;/* لنزع النقط السوداء التابعة للقوائم */
}
.menu li {
	padding: 0;
	margin: 0 2px;
	float: right; /* لجعل القائمة أفقية و ليست عمودية */
	position: relative;
	text-align: center;
}
.menu a {
	padding: 14px 10px;
	display: block; /* ليملأ الرابط كل مكان Li و لا يكتفي بمكان الرابط فقط */
	color: #000000;
	width: 144px;
	text-decoration: none;
	background: url(images/button.gif) no-repeat center center;
}
.menu li em { /* هذا تنسيق الوصف الذي سنظره و نخفيه بتاثير المكتبة */
	background: url(images/hover.png) no-repeat;
	width: 180px;
	height: 45px;
	position: absolute;
	top: -85px;
	right: -15px;
	text-align: center;
	padding: 20px 12px 10px;
	font-style: normal;
	z-index: 2;
	display: none; /* القيمة الافتراضية له أن يكون مخفيا */
}

<script src="jquery.js" type="text/javascript"></script>

$(document).ready(function(){
 
	$(".menu2 a").append("<em></em>");
 
	$(".menu2 a").hover(function() {
		$(this).find("em").animate({opacity: "show", top: "-75"}, "fast");
		var hoverText = $(this).attr("title");
	    $(this).find("em").text(hoverText);
	}, function() {
		$(this).find("em").animate({opacity: "hide", top: "-85"}, "slow");
	});
 
});

$(".menu2 a").append("<em></em>");

display: none;

$(this).find("em").animate({opacity: "show", top: "-75"}, "fast");