css
@charset "gb2312";
*{ margin:0; padding:0}
.clear{ clear:both;}
li{ list-style-type:none;}
.box {
height: 300px;
width: 300px;
margin: 0 auto;
}
.box .test {
display: none;
background-color: #FFE8E8;
border: 1px solid #FF0000;
position: absolute;
width: 100px;
height: 50px;
z-index: 999;
left: 0px;
}
.box li {
float: left;
width: 100px;
text-align: center;
}
.box a {
color: #333333;
text-decoration: none;
font-weight: bold;
display: block;
line-height: 30px;
background-color: #CCCCCC;
z-index: 0;
}
.box a:hover {
color: #FFFFFF;
background-color: #006699;
}
html代码
<div class="box">
<ul>
<li><a href="#">链接一</a><div class="test">拉的积分垃圾速度快浪费</div></li>
<li><a href="#">链接一</a><div class="test">拉的积分垃圾速度快浪费</div>
</li>
<li><a href="#">链接一</a><div class="test">拉的积分垃圾速度快浪费</div>
</li>
<li><a href="#">链接一</a><div class="test">拉的积分垃圾速度快浪费</div>
</li>
<li><a href="#">链接一</a><div class="test">拉的积分垃圾速度快浪费</div>
</li>
<li><a href="#">链接一</a><div class="test">拉的积分垃圾速度快浪费</div>
</li>
</ul>
</div>
</body>
</html>
<script>
$('.box a').hover(function(){$(this).next('div').show();},function(){$(this).next('div').hide();});
$('.box a').next('div').hover(function(){$(this).show();$(this).prev('a').addClass('cur');},function(){$(this).hide();$(this).prev('a').removeClass('cur');});
$('.box li').hover(function(){$(this).css('position','relative');},function(){$('li').css('position','');});
</script>