关于删除className的问题

下面是纯javascript下拉菜单，没用css伪类实现<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" c />
<style type="text/css">
ul { 
 padding: 0;
 margin: 0;
 list-style: none;
}li {
 float: left; 
 width: 160px; 
}li ul { 
 display: none; 
 top: 20px; 
}
li.over ul {
 display: block;
}
ul li a{
 display:block;
 font-size:12px;
 border: 1px solid #ccc;
 padding:3px;
 text-decoration: none;
 color: #777;
}
ul li a:hover{
 background-color:#f4f4f4;
}
</style>
<script type="text/javascript">
startList = function() {
 
  navRoot = document.getElementById("nav");
  for (i=0; i<navRoot.childNodes.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"," "); 
this.removeAttribute("class");
    }
   }
  }
 }window.onload=startList;</script>
</head><body>
<ul id="nav">
  <li><a href="">文章</a>
    <ul>
      <li><a href="">CSS教程</a> </li>
   
      <li><a href="">DOM教程</a></li>
      <li><a href="">XML教程</a></li>
      <li><a href="">Flash教程</a></li>
 </ul>
 </li>  <li><a href="">参考</a>
    <ul>
      <li><a href="">XHTML</a></li>
      <li><a href="">XML</a></li>
      <li><a href="">CSS</a></li>
    </ul>
  </li>  <li><a href="">Blog</a>
    <ul>
      <li><a href="">全部</a></li>
      <li><a href="">网页技术</a></li>
      <li><a href="">UI技术</a></li>
      <li><a href="">FLASH技术</a></li>
    </ul>
  </li>
</ul>
</body>1。为什么this.className+=" over";over前要加空格2。为什么(node.nodeName=="LI")  li要大写3。为什么this.className=this.className.replace(" over"," "); 在IE中有效，而在firefox中无效，但我记得firefox是支持replace方法的，在其他程序中用这条又有效。而this.removeAttribute("class");在Firefox中有效所以我只好把两种都写上了，兼容IE和FF

解决方案 »

  1.   

    1。为什么this.className+=" over";over前要加空格 
    这样写是为了将样式名连接起来，即 styleA styleB styleC，如果去掉空格就是 styleAstyleBstyleC，
    这是一个样式名了，有无暂且不论。    2。为什么(node.nodeName=="LI")  li要大写 
    因为默认 elementNode 的 nodeName 默认都是大写滴，至于原因问 MS 或 W3C 去吧，
    要小写也行 (node.nodeName.toLowerCase()=="li")      3。为什么this.className=this.className.replace(" over"," "); 在IE中有效，而在firefox中无效，但我记得firefox是支持replace方法的，在其他程序中用这条又有效。 
    问题在于 className，ff 难道不允许动态修改？！
    我们强制用户用 IE，基本不管 FF，哈    而this.removeAttribute("class");在Firefox中有效 
    removeAttribute 是 IE 扩展滴！
      

  2.   

    而this.removeAttribute("class");在Firefox中有效 说错了，removeAttribute 是 DOM 标准方法！
    不过 className 也是 DOM 滴标准属性呀！