层的显示隐藏及居中，急呀~~~~

两层目录，鼠标移动到一级目录，下面显示出其子目录（在此一级目录下面显示），鼠标移开，子目录消失，怎么办？源代码如下，这段代码只能实现显示子目录，但是子目录不能准确消失，而且子目录总是在页面的最左边，不能和其父目录对应。请大虾帮忙！！！
<?php

echo "<script LANGUAGE=JavaScript>\n ";

echo " function showIt(i) \n ";
echo " { \n";
echo " whichE1 = eval('a' + i ); \n";
echo " whichE1.style.visibility = 'visible'; \n ";
echo " for(j = 0;j<count1 && j!=i;j++) \n ";
echo " { \n ";
echo " whichE1 = eval('a' + j ); \n";
echo " whichE1.style.visibility = 'hidden'; \n ";
echo " } \n ";
echo " } \n ";

echo "</script>";
?>



<body>

<table width="90%" border="0">
<tr>
<?php for ($i=0;$i<$count1;$i++){ ?>
<td onMouseOver="showIt('<?php echo $i;?>')">
<table>

<tr>
<td>
<a href='select_result.php?typename=<?php echo $type1[$i]; ?>'><?php echo $type1[$i];?></a>
</td>
</tr>

<tr>
<td>
<div id="<?php echo 'a'.$i;?>" class="gen1" style="position:absolute; width:113px; height:82px; z-index:1; left: 3px; top: 33px; visibility: hidden;">
<table width="90%" border="0">
<?php for ($j=0;$j<$count2[$i];$j++){ ?>
<tr><td><a href='select_result.php?typename=<?php echo $type2[$i][$j]; ?>'><?php echo $type2[$i][$j];?></a></td></tr>
<?php } ?>
</table>
</div>
</td>
</tr>

</table>
</td>
<?php } ?>
</tr>
</table>

</body>