为什么我这一段在FF中可以实现，但是IE中就不行，求高手解答


<html>
<head>
<title>index</title>
<style type="text/css">
body{
font:normal 11px verdana;
}
ul{
margin:0;
padding:0;
list-style:none;
width:150px;
border-bottom:1px solid #ccc;
}
ul li {
position:relative;
}
li ul{
position:absolute;
left:149px;
top:0;
display:none;
}
ul li a{
display:block;
text-decoration:none;
color:#777;
background:#fff;
padding:5px;
border:1px solid #ccc;
border-bottom:0;
}
*html ul li{
float:left;
height:1%;
}
*html ul li a{
height:1%;
}
li:hover ul, li.over ul {
display:block;
}
</style>
<script type="text/javascript">
startList = function(){
if(document.all && document.getElementById){
navRoot = document.getElementById("nav");
for( i=0;i<navRoot.length;i++){
node = navRoot.childNodes[i];
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="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Offices</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Internet</a></li>
 <li><a href="#">Hosting</a></li> 
 <li><a href="#">Domain Names</a></li> 
 <li><a href="#">Broadband</a></li> 
</ul>
</li>
<li><a href="#">Contact Us</a> 
 <ul> 
 <li><a href="#">United Kingdom</a></li> 
 <li><a href="#">France</a></li> 
 <li><a href="#">USA</a></li> 
 <li><a href="#">Australia</a></li> 
  </ul> 
 </li> 
</ul>
</body>
</html>

解决方案 »

  1.   

        <script type="text/javascript">
            startList = function(){
                if(document.all && document.getElementById){
    var obj = document.getElementById('nav').getElementsByTagName('li');
    for( var i = 0; i < obj.length; i ++) {
    obj[i].onmouseover = function() {
    this.className += ' over';
    }
    obj[i].onmouseout = function() {
    this.className = this.className.replace(' over', '');
    }
    }
                }
            } 
            window.onload = startList;
        </script>
      

  2.   

    实际上，在IE标准模式下，你的代码是可以实现你想要的效果的（标准模式是支持li:hover伪类的）；Quirks模式下无效，因为你写的JS代码有问题：
    navRoot = document.getElementById("nav"); //navRoot是个对象，并不是数组，所以下面的循环是永远不会被执行的
                    for( i=0;i<navRoot.length;i++){
    //...
      

  3.   

    1楼的代码，把检测IE浏览器的代码去掉以后，你可以把li:hover样式也去掉，这段JS在各浏览器下都是兼容的：
        <script type="text/javascript">
            startList = function(){
    var obj = document.getElementById('nav').getElementsByTagName('li');
    for( var i = 0; i < obj.length; i ++) {
    obj[i].onmouseover = function() {
    this.className += ' over';
    }
    obj[i].onmouseout = function() {
    this.className = this.className.replace(' over', '');
    }
    }
                }
            window.onload = startList;
        </script>