<!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=gb2312" />
<title>无标题文档</title>
</head>
<body>
<style>
.ls{ width:700px; margin:0 auto;}
.ls li{ float:left; width:100px; margin-left:15px; list-style:none;}
.info {position:relative;background:#fff;color:#666; text-decoration:none;font-size:12px;width:200px;text-align:center;border:1px solid #ccc;height:25px;line-height:25px;}/*设置链接的属性,一定要设置为relative才能使提示层跟着链接走*/
.info:hover {background:#eee;color:#333;}
.info span {display: none }/*设置正常下的span为隐藏状态*/
.info:hover span /*设置hover下的span属性为呈现状态,并设置提示层的位置*/{ display:block;position:absolute;top:150%;left:0;width:250%;
border:1px solid #cccccc; background:#fff; color:#000;padding: 0 5px; text-align:left;}
</style>
<body>
<div class="ls">
<ul>
<li><a class="info" href="http://www.chinaz.com">中国站长站<span>老爸老妈祝您们在新的一年里身体健康,平安快乐,事事如意!</span></a></li>
<li><a class="info" href="http://www.chinaz.com">中国站长站<span>老哥祝你新婚快乐!百年好合!</span></a></li>
<li><a class="info" href="http://www.chinaz.com">中国站长站<span>小东西,祝你工作顺利,财源滚滚,幸福快乐,健康平安</span></a></li>
<li><a class="info" href="http://www.chinaz.com">中国站长站<span>祝我自己快快乐乐,钱越多越好!皮肤好好!健康平安!</span></a></li>
</ul>
</div>
</body>
</html>
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
