关于动态菜单中层对齐的问题？？

<body >
<table width="75%" border="1" cellspacing="2" cellpadding="2">
  <tr bgcolor="#FFFF00" > 
    <td  onMouseOver="MenuShow(menu01 )" onMouseOut="MenuHide(menu01 )">
<div id=menu01 style="WIDTH: 100px; POSITION: absolute; TOP: 40px; HEIGHT: 115px;display=none"> 
  <table width="102%" height="116" border="1" cellpadding="2" cellspacing="2">
    <tr> 
      <td>1</td>
    </tr>
    <tr> 
      <td>2</td>
    </tr>
    <tr> 
      <td>3</td>
    </tr>
  </table>
</div>
菜单1    
    </td>
    
    <td onMouseOver="MenuShow(menu02 )" onMouseOut="MenuHide(menu02 )" >
<div id=menu02 style=" WIDTH: 100px; POSITION: absolute; TOP: 39px; HEIGHT: 115px;display=none"> 
  <table width="102%" height="116" border="1" cellpadding="2" cellspacing="2">
    <tr> 
      <td>a</td>
    </tr>
    <tr> 
      <td>b</td>
    </tr>
    <tr> 
      <td>c</td>
    </tr>
  </table>
</div>
菜单2
    </td>
  </tr>
  
</table>
</body>
<script language="JavaScript" type="text/JavaScript">
function MenuShow(menu)
{
menu.style.display="block"}
function MenuHide(menu)
{
menu.style.display="none"}
</script>