一个JS下拉框问题

一个JS下拉框问题

下拉菜单问题
我在网上找到一段竖向的下拉菜单代码,如下:
<style type="text/css">
<!--
ul {
    margin: 0px;
        padding: 0px;
        list-style: none;
        width: 120px;
        border-bottom: 1px solid #777;
}
ul li {
    position: relative;
}
li ul {
    position: absolute;
        left: 120px;
        width:50px;
        top: 0px;
        display: none;
}
ul li a {
    display: block;
        font-size: 12px;
        text-decoration: none;
        color: #333;
        background-color: #FFF;
        padding: 5px;
        border: 1px solid #777;
        border-bottom: 0px;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li {
    float: left;
        height: 1%;
}
* html ul li a {
    height: 1%;
}
/* End */
li:hover ul, li.over ul {
    display: block;
}
-->
</style>
<script language="javascript" type="text/javascript">
<!--
startList = function() {
    if (document.all&&document.getElementById) {
        navRoot = document.getElementById("nav");
        for (i=0; i<navRoot.childNodes.length; i++) {
            node = navRoot.childNodes;
            if (node.nodeName=="LI") {
                node.onmouseover=function() {
                    this.className += " over";
                }
                node.onmouseout=function() {
                    this.className=this.className.replace(" over", "");
                }
           }
        }
    }
}
window.onload = startList;
-->
</script>
</head>

<body>
<ul id="nav">
  <li><a href="#">首页</a>
   <ul>
   <li><a href="#">公司简介</a></li>
   <li><a href="#">组织机构</a></li>
   <li><a href="#">企业历程</a></li>
        </ul>
  </li>
  <li><a href="#">关于我们</a>
    <ul>
   <li><a href="#">公司简介</a></li>
   <li><a href="#">组织机构</a></li>
   <li><a href="#">企业历程</a></li>
        </ul>
  </li>


有些地方不明白,望大侠们指点下。一个是我不太清楚,他是怎么控制鼠标移到下拉的二级菜单的时候保证二级菜单不消失?因为我在用于我的网站中去的时候出现了这个问题,当鼠标移到二级菜单的时候二级菜单就会马上消失,我想应该是onmouseout这个控制,但不能完全弄明白它是怎么跟CSS联系起来的?望各位大侠们指点下!然后还有个node.nodeName=="LI",这个LI不太明白是什么,是指下面的标签<li>吗,但我改成小写的就不行了,也望大侠们指点下!谢谢各位了!

如果分离成两个DIV就会出现你这个问题,如果是在同一个LI下,而方法写在最上层的LI里,就不会有这个问题