层的显示隐藏的问题

代码如下：
<html>
<body>
<input type=hidden id="pos" value=0 />
<div id="div1" style="position:absolute;z-index:10;left:50px;top:50px;width:80px;height:100px; background-color:#CC0000;" >
<table>
<tr>
<td onmouseover="show('div2',0);" onmouseout="hidden();">qqqqqqqqqqq</td>
</tr>
<TR>
<td onmouseover="show('div2',10);" onmouseout="hidden();">wwwwwwwwwww</td>
</tr>
<TR>
<td onmouseover="show('div2',20);" onmouseout="hidden();">wwwwwwwwwww</td>
</tr>
</div>
<div id="div2" style="position:absolute;z-index:10;left:90px;top:10px;width:150px;height:100px; background-color:#6699cc;display:none;" onmouseover="show('div2',document.getElementById("pos").value);">
2222222<br>
2222222<br>
2222222<br>
</div></body>
</html>
<script>
function show(id, w) {   
   document.getElementById("pos").value = w;   
   document.getElementById(id).style.display = "";
   document.getElementById(id).style.top =  w + "px";
}
 function hidden() {
   document.getElementById("div2").style.display = "none";}
</script>
为什么鼠标移到层2上的时候，层2就消失了