<!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>
<script src="jquery.js"></script>
<style type="text/css">
#apDiv1 {
position:relative;
left:20px;
top:42px;
width:487px;
height:639px;
}
#apDiv1 ul li {
list-style-type: none;
}
.apDiv2 {
/* li中的div要设置成绝对，这样，因为ul和li没有设置定位（绝对或相对，默认static），li中的div是相对于最外层的div(#apDiv1)，此时此div的位置并不受ul 和li的影响，三个div会重叠到一起*/position:absolute;
left:161px;
top:20px;
width:195px;
height:211px;
display:none;
z-index:2;
}
* {
border: 1px solid #F00;
}
div {
border: 1px solid #999;
}
</style>
</head>
<body>
<div id="apDiv1">
<ul>
<li>1111<div class="apDiv2">111</div></li>
<li>2222<div class="apDiv2">2222</div></li>
<li>3333<div class="apDiv2">3333</div></li>
</ul>
</div>
<script>
$(function(){
$("li").hover(function(){
var index=$("li").index($(this));
$(".apDiv2").eq(index).css({"display":"block"});
},
function(){
var index=$("li").index($(this));
$(".apDiv2").eq(index).css({"display":"none"});
}
);
});
</script>
</body>
</html>
