<!-- .info {/*设置链接的属性,一定要设置为relative才能使提示层跟着链接走*/ position:relative; background:#fff; color:#666; text-decoration:none; font-size:12px; width:70px; text-align:center; border:1px solid #ccc; height:25px;line-height:25px; } .info:hover {background:#eee; color:#333;} .info span {/*设置正常下的span为隐藏状态*/ display: none } .info:hover span {/*设置hover下的span属性为呈现状态,并设置提示层的位置*/ display:block; position:absolute; top:30px; left:60px; width:90px; border:1px solid #ff0000; background:#fff; color:#000; padding:5px; text-align:left; } -->
 
<a class="info" href="http://www.shenaiqiu.com">导航栏一<span>效果不错吧！</span></a>
<a class="info" href="http://www.shenaiqiu.com">导航栏二<span>效果不错吧！</span></a>
<a class="info" href="http://www.shenaiqiu.com">导航栏三<span>效果不错吧！</span></a>
<a class="info" href="http://www.shenaiqiu.com">导航栏四<span>效果不错吧！</span></a>
<a class="info" href="http://www.shenaiqiu.com">导航栏五<span>效果不错吧！</span></a>