高分请教做菜单的原理 请大侠们帮助

授人鱼不如授人渔,一句话,对层div的操作.记住这个关键,其它的自己去体会吧.....

解决方案 »

  1.   

    写的很乱，你看看行不？
    <body style="MARGIN: 0px">
    <div id="div_oMenu">
    <table style="FONT-SIZE: 9pt; BORDER-COLLAPSE: collapse" cellpadding=0 cellspacing=0 height="22" width="100%" border="1">
    <tr>
    <td></td>
    <td style="CURSOR: default" align="middle" width="70" typestring="MenuParent">
    首页</td>
    <td style="CURSOR: default" align="middle" width="70" onmouseover="show()" onmouseout="hide_s()" typestring="MenuParent">
    注册</td>
    <td width="20%"></td>
    </tr>
    </table>
    </div>
    <div style="BORDER:solid 1px #637194; POSITION: absolute ; display:none" id="o" onmouseout="hide_s()" onmouseover="show2()">
    <table style="BORDER-COLLAPSE: collapse" height="95" width="115" bgcolor="#ffffff">
    <tr>
    <td>修改资料</td>
    </tr>
    </table>
    </div>
    <script language="javascript">
    <!--
    var oParent = null;
    function show()
    {
        o.style.left = event.srcElement.getBoundingClientRect().left;
    o.style.height = event.srcElement.getBoundingClientRect().top;
    o.style.display = "";    
    show2();
    }
    function show2()
    {
       if(oParent)
        clearTimeout(oParent); // 删除“延时隐藏”方法
    }
    function hide_s()
    {
      oParent = setTimeout("hide_m()",100); //做个延时隐藏div
    }
    function hide_m()
    {
    o.style.display = "none"
    }
    //-->
    </script>
    </body>