javascript设置下拉菜单注意事项

一个下拉菜单搞了我整整3天都没有解决，问了很多人，发了很多贴，都没有我想要的那种效果，一个是代码太多，烦琐，不知道为什么就要实现一个显示和隐藏菜单这么简单的功能都要写那么复杂。我个人是比较反感的。所以经过我几天的实践，终于把问题给解决了。主要原因是层的问题，不是javascript代码问题.

 <script language="javascript">
//显示菜单
function setDivDisplay(divName) {
    var v = document.getElementById(divName);
    var e = window.event;
   
    if ( v.style.left === "" ){
        v.style.left = (e.clientX - 50) + "px";
    }
   
    if (v.style.top === "") {
        v.style.top = (e.clientY + 1) + "px";
    }
   
    v.style.visibility = "visible";
   
   
}
function setDivHide(divName) {
    var v = document.getElementById(divName);
    v.style.visibility = "hidden";
}

</script>

需要注意的就是层的x和y轴位置,不然鼠标移到下拉菜单就会自动消失

页面写法：

   <TABLE width="100%" align="center" border="0" cellpadding="0" cellspacing="0">

        <TR >
            <TD>
                <TABLE border="0" cellpadding="0" cellspacing="1">
                    <TR align="left" >
                       
                        <TD onmouseover="setDivDisplay('gztfg')" onmouseout="setDivHide('gztfg')" >
                                工作台风格<img src="../images/menu_open.gif" border="0">|
                        </TD>
                       
                    </TR>
                </TABLE>
            </TD>
        </TR>
       
    </TABLE>

   <DIV id="gztfg" onmouseover="setDivDisplay('gztfg')" onmouseout="setDivHide('gztfg')" style="position:absolute;visibility:hidden;">
        <TABLE border="0" cellpadding="0" cellspacing="1" >
            <TR>
                <TD width="4" ></TD>
                <TD height="20" ">树型结构</TD>
            </TR>
            <TR>
                <TD width="4" ></TD>
                <TD height="20">windows方式</TD>
            </TR>
        </TABLE>
    </DIV> 
。。。