js下拉菜单问题

想问个菜单父级mouseout事件的问题，mouseout分为两种情况：一是从父级移出到该父级对应的子级上，另一种是从父级移出不在子级上，实现的效果分别是从父级移出继续保持子级打开状态，和从父级移出隐藏子级。
对应的父级项mouseout事件隐藏子级的定义为：if (mainID == "Tdiv") {
    if (show == 1) { eval("showdiv(" + "Div" + numID + ")"); }
    else { eval("hidediv(" + "Div" + numID + ")"); }
}function hidediv(obj) { //隐藏下拉列表
    nbottom = 0;
    obj.style.display = "none";
}搞不明白为什么一种隐藏定义会出现两种效果，大大们能给我解释下吗？
下面是完整的例子代码<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
    <style type="text/css">
        .menubar
        {
            position: absolute;
            top: 10px;
            width: 100px;
            height: 20px;
            cursor: default;
            border-width: 1px;
            border-style: outset;
            color: #99FFFF;
            background: #669900;
        }
        .menu
        {
            position: absolute;
            top: 32px;
            width: 140px;
            display: none;
            border-width: 2px;
            border-style: outset;
            border-color: white sliver sliver white;
            background: #333399;
            padding: 15px;
        }
        .menu A
        {
            text-decoration: none;
            color: #99FFFF;
        }
        .menu A:hover
        {
            color: #FFFFFF;
        }
    </style>    <script language="javascript">
        function divControl(show) { //判断是否显示相对应的下拉列表
            window.event.cancelBubble = true;
            var objID = event.srcElement.id;
            var index = objID.indexOf("_");
            var mainID = objID.substring(0, index);
            var numID = objID.substring(index + 1);            if (mainID == "Tdiv") {
                if (show == 1) { eval("showdiv(" + "Div" + numID + ")"); }
                else { eval("hidediv(" + "Div" + numID + ")"); }
            }
        }
        var nbottom = 0, speed = 2;
        function displayMenu(obj) { //在显示下拉菜单时,以下拉方式显示下拉菜单
            obj.style.clip = "rect(0 100% " + nbottom + "% 0)";
            nbottom += speed;
            if (nbottom <= 100) {
                timerID = setTimeout("displayMenu(" + obj.id + "),1");
            }
            else clearTimeout(timerID);
        }
        function showdiv(obj) { //显示下拉列表
            obj.style.display = "block";
            obj.style.clip = "rect(0 0 0 0)";
            nbottom = 5;
            displayMenu(obj);
        }
        function hidediv(obj) { //隐藏下拉列表
            nbottom = 0;
            obj.style.display = "none";
        }
        function keepstyle(obj) { //在下拉菜单中移动时,保持下拉列表的样式
            obj.style.display = "block";
        }
    </script>    <table border="0" width="400" cellspacing="0" cellpadding="0" style="font-size: 15px">
        <tr>
            <td width="20%">
                <div align="center" id="Tdiv_1" class="menubar" onmouseover="divControl(1)" onmouseout="divControl(0)">
                    教育网站
                </div>
            </td>
            <td width="20%">
                <div align="center" id="Tdiv_2" class="menubar" onmouseover="divControl(1)" onmouseout="divControl(0)">
                    电脑丛书网站
                </div>
            </td>
            <td width="20%">
                <div align="center" id="Tdiv_3" class="menubar" onmouseover="divControl(1)" onmouseout="divControl(0)">
                    新出图书
                </div>
            </td>
            <td width="20%">
                <div align="center" id="Tdiv_4" class="menubar" onmouseover="divControl(1)" onmouseout="divControl(0)">
                    其它网站
                </div>
            </td>
        </tr>
        </tr>
        <tr>
            <td width="20%">
                <div align="left" id="Div1" class="menu" onmouseover="keepstyle(this)" onmouseout="hidediv(this)">
                    <a href="#">重庆XX大学</a><br>
                    <a href="#">长春XX大学</a><br>
                    <a href="#">吉林XX大学</a>
                </div>
            </td>
            <td width="20%">
                <div align="left" id="Div2" class="menu" onmouseover="keepstyle(this)" onmouseout="hidediv(this)">
                    <a href="http://www.mingrisoft.com">明日科技VB图书</a><br>
                    <a href="http://www.mingrisoft.com">明日科技Delphi图书</a><br>
                    <a href="http://www.mingrisoft.com">明日科技Java图书</a>
                </div>
            </td>
            <td width="20%">
                <div align="left" id="Div3" class="menu" onmouseover="keepstyle(this)" onmouseout="hidediv(this)">
                    <a href="http://www.mingrisoft.com">Delphi XX图书</a><br>
                    <a href="http://www.mingrisoft.com">VB XX图书</a><br>
                    <a href="http://www.mingrisoft.com">Java XX图书</a>
                </div>
            </td>
            <td width="20%">
                <div align="left" id="Div4" class="menu" onmouseover="keepstyle(this)" onmouseout="hidediv(this)">
                    <a href="http://www.mingrisoft.com">明日科技主页</a><br>
                    <a href="http://www.mingrisoft.com">明日科技图书网</a><br>
                    <a href="http://www.mingrisoft.com">明日技术支持网</a></div>
            </td>
    </table>
</body>
</html>

解决方案 »

  1.   

    lz重新下个js 菜单。
    function displayMenu(obj) {    //在显示下拉菜单时,以下拉方式显示下拉菜单
                obj.style.clip = "rect(0 100% " + nbottom + "% 0)";//这句不执行，暂未找到问题。
                nbottom += speed;
                if (nbottom <= 100) {
                    timerID = setTimeout("displayMenu(" + obj.id + "),1");
                }
                else clearTimeout(timerID);
            }
      

  2.   

    onmouseover="divControl(1)"  numID:1
    onmouseout="divControl(0)"   numID:0            if (mainID == "Tdiv") {
                    if (show == 1) { eval("showdiv(" + "Div" + numID + ")"); }
                    else { eval("hidediv(" + "Div" + numID + ")"); }
                }
      

  3.   

    能不能说说mouseout事件的两种情况(父->子和父->其它)具体执行流程