求救。显示出来的div被挡住。

2015-10-12 03:37:27 208 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

PCIe Crosslink PCIe Crosslink（交叉连接）是一种特殊的PCIe链路连接方式，允许两个PCIe设备（通常是Root Complex或Endpoint）是指两个PCIe设备（如两个CPU、两个FPGA或两个GPU）通过PCIe链路直接连接，形成点对点（P2P）通信通道。：两个Intel/AMD CPU通过PCIe Crosslink直接通信（替代UPI/Infinity Fabric）。：主板需提供PCIe Crosslink连接（如特定插槽支持x16/x8 Crosslink）。阅读详情

为什么旁边的li 会挡住显示出来的div？设置了z-index都不行。。。。求大神。

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
ul{
list-style:none;
}
li{
width:50px; height:50px; position:relative;
float:left; margin-right:20px; margin-top:20px;
background:red; top:10px; z-index:1;

}
#box div{
width:100px;height:100px;position:absolute;
bottom:10px;left:30px;background:yellow;
border:solid 1px;display:none;z-index:9999;

}
#box{
width:660px;
height:250px;
border:solid 1px;

}

</style>

<script>
window.onload =function (){
var ali = document.getElementsByTagName("li");

function adiv(){
for(var i =0;i<ali.length;i++){
ali[i].style.zIndex=0;
ali[i].onmouseover =function (){
this.getElementsByTagName('div')[0].style.display="block";
}
ali[i].onmouseout =function(){
this.getElementsByTagName('div')[0].style.display="none";
}
}
}
adiv();

}

</script>
</head>
<body>

<div id="box">
<ul>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
</ul>
</div>
</body>
</html>

...全文