<!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>