用table实现隐藏式子菜单的注意点

之前做隐藏式的子菜单的时候想当然的认为只要当鼠标移出该表格的时候就隐藏，于是使用了

<script>...
function hideMenu()
...{
    window.document.getElementById('submenu').style.display="none";
}
</script>
<div id="submenu">
<table onMouseOut="hideMenu();">
   <tr><td>a</td></tr>
   <tr><td>b</td></tr>
   <tr><td>c</td></tr>         
</table>
</div>

但是发现鼠标移到表格跟表格的间隙的时候也会触发该语句，于是我又加上了：
border="0" cellspacing="0px"
心里想这下可就没有间隙了，但是还是出现了只要鼠标移动到表格跟表格之间的时候马上触发onMouseOut属性

最后，将hideMenu修改成这样：

 

<script>...
function hideMenu()
...{
    var submenu = window.document.getElementById('submenu');
    minx = parseInt(submenu.style.left);//菜单最左端X坐标
    miny = parseInt(submenu.style.top);//菜单最右端X坐标
    maxx = parseInt(submenu.style.left)+submenu.offsetWidth;//菜单最上端Y坐标
    maxy = parseInt(submenu.style.top)+submenu.offsetHeight;//菜单最下端Y坐标
                      //只有当鼠标移动的范围超出了整个菜单的范围时才真正将菜单隐蔽
    if(event.clientX < minx || event.clientX > maxx || event.clientY < miny || event.clientY > maxy)
    ...{
        submenu.style.display="none";
    }
}
</script>

终于成功，js实在太费神，一个小小的子菜单都要这样折腾。