【求助】同一个js为什么在chrome、ff、ie下的运行效率不同

最近在看js的事件处理，想实践一下，用js写一个简单的页面想实现一个二级导航，目前只做到了移到一级导航上，显示二级子菜单，移出的还没做，调试的时候发现在ff和ie的环境下载入速度差不多，一刷新就好了，在chrome下刷新载入的时候刚开始一级导航和二级导航都显示了，闪了一下之后二级子菜单隐去。求解这是为什么<html>
<head>
<title>下拉菜单-js事件处理练习</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="css/droplist.css" />
<script type="text/javascript" src="js/droplist.js"></script>
</head>
<body>
<div id="outer">
<ul class="nav">
<li><a href="#">一级导航1</a>
                 <ul>
                  <li><a href="#">二级导航1</a></li>
<li><a href="#">二级导航2</a></li>
<li><a href="#">二级导航3</a></li>
                 </ul>
</li>
<li><a href="#">一级导航2</a>
<ul>
<li><a href="#">二级导航4</a></li>
<li><a href="#">二级导航5</a></li>
<li><a href="#">二级导航6</a></li>
</ul>
</li>
<li><a href="#">一级导航3</a>
                <ul>
<li><a href="#">二级导航7</a></li>
<li><a href="#">二级导航8</a></li>
<li><a href="#">二级导航9</a></li>
</ul>
</li>
<li><a href="#">一级导航4</a>
<ul>
<li><a href="#">二级导航a</a></li>
<li><a href="#">二级导航b</a></li>
<li><a href="#">二级导航c</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  }
  else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}addLoadEvent(ppnav);
// window.onload=ppnav;var EventUtil = {
   addHandler : function(element, type , handler){
      if (element.addEventListener){
  element.addEventListener(type, handler, false);
      }
      else if ( element.attachEvent){
          element.attachEvent("on" + type , handler)
      }
      else {
          element["on" + type] = handler;
      }
   },
   getTarget: function(event){
      return event.target || event.srcElement;
   }
} function ppnav(){
    if(!document.getElementsByTagName) return false;
    var lists=document.getElementsByTagName("ul");
    if (!lists) return false;
    for(i=0;i<lists.length;i++){
      if(lists[i].className!="nav"){
       lists[i].className="hideNav"
      }
      EventUtil.addHandler(lists[i],"mouseover",navmouseover);
      //EventUtil.addHandler(lists[i],"mouseout",navmouseout);
      //lists[i].onmouseover=navmouseover;
    }
}function navmouseover(e){
var evt = e || window.event;
var evtTarget = evt.target || evt.srcElement;
while (evtTarget.nodeName != 'LI')
evtTarget = evtTarget.parentNode;
shownav(evtTarget);
}function shownav(targetNode){
if (!targetNode) return false;
    var listItems=targetNode.getElementsByTagName("ul")[0];
    if(listItems){
        listItems.className="shownav";
    }
}
body{
text-align: center;
font-size:18px;
}
#outer{
width:770px;
margin:0 auto;
text-align:center;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
.nav li {
position:relative;
float: left;
width: 150px;
}.hideNav {
display: none;
}
.showNav{
position:absolute;
display: block;
top: 40px;
left:0;
}ul li a{
line-height: 30px;
display:block;
font-size:18px;
border: 1px solid #ccc;
text-decoration: none;
color: #777;
background:#eee;
}
JavaScript函数ChromeInternet Explorer导航

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>下拉菜单</title>
    <style type="text/css">
        body{ text-align: center;}
        #outer{
            width:770px;
            margin:0 auto;
            text-align:center;
            font-size:18px;
        }
        ul,li {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .nav li {
            position:relative;
            float: left;
            width: 150px;
        }
        #outer ul li ul{
            position:absolute;
            top: 32px;
            display: none;
        }
        #outer ul li ul a{border-top:none;}
        ul li a{
            line-height: 30px;
            display:block;
            font-size:18px;
            border: 1px solid #ccc;
            text-decoration: none;
            color: #777;
            background:#eee;
        }
    </style>
</head>
<body>
<div id="outer">
    <ul class="nav">
        <li><a href="#">一级导航1</a>
            <ul class="showNav">
                <li><a href="#">二级导航1</a></li>
                <li><a href="#">二级导航2</a></li>
                <li><a href="#">二级导航3</a></li>
            </ul>
        </li>
        <li><a href="#">一级导航2</a>
            <ul>
                <li><a href="#">二级导航4</a></li>
                <li><a href="#">二级导航5</a></li>
                <li><a href="#">二级导航6</a></li>
            </ul>
        </li>
        <li><a href="#">一级导航3</a>
            <ul>
                <li><a href="#">二级导航7</a></li>
                <li><a href="#">二级导航8</a></li>
                <li><a href="#">二级导航9</a></li>
            </ul>
        </li>
        <li><a href="#">一级导航4</a>
            <ul>
                <li><a href="#">二级导航a</a></li>
                <li><a href="#">二级导航b</a></li>
                <li><a href="#">二级导航c</a></li>
            </ul>
        </li>
    </ul>
</div>
<script type="text/javascript">
    var ul=document.getElementById("outer").getElementsByTagName("ul")[0];
    if(!document.all){
        var elem_child = ul.childNodes;
        for(var i=0; i<elem_child.length;i++){
            if(elem_child[i].nodeName == "#text" && !/\s/.test(elem_child.nodeValue)){
                ul.removeChild(elem_child[i]);
            }
        }
    }
    var li=ul.childNodes;
    for(var i=0;i<li.length;i++){
        li[i].onmouseover=function(){this.getElementsByTagName("ul")[0].style.display="block";};
        li[i].onmouseout=function(){ this.getElementsByTagName("ul")[0].style.display="none"; };
    }
</script>
</body>
</html>
ls的大哥，你这个是对第一级的li设定事件，我想请教一下如果用冒泡在最外面的ul上注册事件要怎么实现功能。