Untitled

<html>

<head>
	<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
	type = "text/javascript">

	</script>

	<script type = "text/javascript">
		$(document).ready(function(){
$(".menu a").hover(function() {
$(this).next("em").animate({opacity: "show", bottom: "-155"}, "fast");
}, function() {
$(this).next("em").animate({opacity: "hide", bottom: "-165"}, "fast");
});
});
	</script>

<style type = "text/css">
.menu { margin: 100px; list-style: none; }
.menu li {
padding: 0;
margin: 0 1px;
float: left;
position: relative;
text-align: center;
}
.menu a {
padding: 10px;
display: block;
color: #222;
width: 150px;
text-decoration: none;
background: #eaf2f5;
-webkit-border-radius: 5px;
border:1px solid #09C;
}
.menu li em {
background: url("box_menu.png") no-repeat;
width: 160px;
height: 120px;
position: absolute;
bottom: -160px;
left: -30px;
text-align: left;
padding: 20px;
font:12px helvetica, arial, sans-serif;
display: none;
}
</style>

</head>
<body>

<ul class = "menu">
	<li>
		<a href = "">Test Check</a>
		<em><strong> Test script: </strong> Check this out! </em>
	</li>
	<li>
		<a href = ""> jQuery is cool </a>
		<em>Test script</em>
	</li>

</ul>

</body>

</html>