![](https://pic002.cnblogs.com/images/2012/382256/2012061217315787.gif)
![](https://pic002.cnblogs.com/images/2012/382256/2012061217320849.png)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>无标题文档</title>
</head>
<body>
<style type="text/css">
body{ font:12px/1.5 arial;}
ul,ol{ list-style:none;}
.menu{ width:570px; margin:100px auto;}
.menu li{ float:left; margin:0 2px;}
.menu a{ position:relative; display:block; width:164px; height:36px; background:url(http://pic002.cnblogs.com/images/2012/382256/2012061217315787.gif) no-repeat; color:#000; text-align:center; line-height:36px;}
.menu em{ position:absolute; top:-85px; left:-15px; display:none; width:200px; height:76px; background:url(http://pic002.cnblogs.com/images/2012/382256/2012061217320849.png) no-repeat; text-align:center; line-height:76px;}
</style>
<ul class="menu">
<li><a href="" title="Go to homepage">Home</a></li>
<li><a href="" title="Find out who I am">About</a></li>
<li><a href="" title="Subscribe RSS feeds">Subscribe RSS</a></li>
</ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(function () {
$('a').append('<em></em>');
$('a').hover(
function () {
var tt = $(this).attr('title');
$('em', this).text(tt);
$('em', this).animate({opacity: 'show', top: '-75px'}, 'slow');
},
function () {
$('em', this).animate({opacity: 'hide', top: '-85px'}, 'fast');
}
);
});
</script>
</body>
</html>