请javascript高手帮忙看一下 为什么子导航的链接会无效？

请高手帮忙看一下 为什么子导航的链接会无效？ <!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>代码调试</title>
<style type="text/css">.main_left_list{ width:210px; height:auto; margin:0; padding:0; border:#CCCCCC;}
.main_left_list ul li{margin:5px auto; font-size:13px; height:20px; letter-spacing:2px; line-height:20px; text-indent:42px; background:url(../images/bg.png) no-repeat -620px -362px; border-bottom:1px dashed #dddddd;}
.main_left_list ul li span{ cursor:pointer;}
.main_left_list ul span{ float:left;z-index:10; padding:6px 6px 6px 0px;width:340px; border:1px solid #dddddd; position: absolute; display:block;background:#caf1f1; filter:progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=120, color=#cccccc);}
.main_left_list .over{ position:relative;border:1px solid #86e5f0; padding:0px; border-bottom:1px solid #caf1f1; margin:-1px 0 0 -1px; z-index:1000; color:#ff6026; text-decoration:underline; background:#caf1f1; height:22px; }
.main_left_list .block{ display:block;}
.main_left_list .none{ display:none;}
</style>
<script language="javascript">
 function XMenu(o){
  this.$ = function(o){ return document.getElementById(o);}
  this.$$ = function(o, str){ return o.getElementsByTagName(str);}
  this.obj = o;
  this.bind();
 }
 XMenu.prototype = {
  bind : function(){
   var xxx = this.$(this.obj);
   var xdt = this.$$(xxx, 'strong');
   var xdd = this.$$(xxx, 'span');
   var xdtl = xdt.length;
   xxx['obj'] = xdt[0];
   for(var i=0; i<xdtl; i++){
    xdt[i]['span'] = xdd[i];
    xdt[i]['div'] = xxx;
    xdt[i].onmouseover = function(){
     this['div']['obj'].className = '';
     this['div']['obj']['span'].className = 'none';
     this.className = 'over';
     this['span'].className = 'block';
     this['div']['obj'] = this;
    }
   }
   xxx.onmouseout = function(){
    var d = this;
    this.hide = setTimeout(function(){
     d['obj'].className = '';
     d['obj']['span'].className = 'none';
     d = null;
    },0); 
   }
   xxx.onmouseover = function(){
    if(this.hide){
     clearTimeout(this.hide);
    }
   }
  }
 }
 window.onload = function (){
  new XMenu('warpper');
 }
</script>
</head>
<body>
<div class="main_left_list">
 <ul id="warpper">
  <li><strong>导航1</strong>
  <span class="none">
   <ul>
    <li><a herf="http://www.hao123.com">好123</a></li>
   </ul>
  </span></li>
  <li><strong>导航2</strong>
  <span class="none">
   <ul>
    <li><a herf="http://www.baidu.com">百度</a></li>
   </ul>
  </span></li>
 </ul>
 </div>
</body>
</html>

解决方案 »

  1.   

    没有问题 少了 /<!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>代码调试 </title> 
    <style type="text/css"> .main_left_list{ width:210px; height:auto; margin:0; padding:0; border:#CCCCCC;} 
    .main_left_list ul li{margin:5px auto; font-size:13px; height:20px; letter-spacing:2px; line-height:20px; text-indent:42px; background:url(../images/bg.png) no-repeat -620px -362px; border-bottom:1px dashed #dddddd;} 
    .main_left_list ul li span{ cursor:pointer;} 
    .main_left_list ul span{ float:left;z-index:10; padding:6px 6px 6px 0px;width:340px; border:1px solid #dddddd; position: absolute; display:block;background:#caf1f1; filter:progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=120, color=#cccccc);} 
    .main_left_list .over{ position:relative;border:1px solid #86e5f0; padding:0px; border-bottom:1px solid #caf1f1; margin:-1px 0 0 -1px; z-index:1000; color:#ff6026; text-decoration:underline; background:#caf1f1; height:22px; } 
    .main_left_list .block{ display:block;} 
    .main_left_list .none{ display:none;} 
    </style> 
    <script language="javascript"> 
    function XMenu(o){ 
      this.$ = function(o){ return document.getElementById(o);} 
      this.$$ = function(o, str){ return o.getElementsByTagName(str);} 
      this.obj = o; 
      this.bind(); 
    } 
    XMenu.prototype = { 
      bind : function(){ 
      var xxx = this.$(this.obj); 
      var xdt = this.$$(xxx, 'strong'); 
      var xdd = this.$$(xxx, 'span'); 
      var xdtl = xdt.length; 
      xxx['obj'] = xdt[0]; 
      for(var i=0; i <xdtl; i++){ 
        xdt[i]['span'] = xdd[i]; 
        xdt[i]['div'] = xxx; 
        xdt[i].onmouseover = function(){ 
        this['div']['obj'].className = ''; 
        this['div']['obj']['span'].className = 'none'; 
        this.className = 'over'; 
        this['span'].className = 'block'; 
        this['div']['obj'] = this; 
        } 
      } 
      xxx.onmouseout = function(){ 
        var d = this; 
        this.hide = setTimeout(function(){ 
        d['obj'].className = ''; 
        d['obj']['span'].className = 'none'; 
        d = null; 
        },0); 
      } 
      xxx.onmouseover = function(){ 
        if(this.hide){ 
        clearTimeout(this.hide); 
        } 
      } 
      } 
    } 
    window.onload = function (){ 
      new XMenu('warpper'); 
    } 
    </script> 
    </head> 
    <body> 
    <div class="main_left_list"> 
    <ul id="warpper"> 
      <li> <strong>导航1 </strong> 
      <span class="none"> 
      <ul> 
        <li><a href="http://www.google.cn/">hao123</a></li> 
      </ul> 
      </span> </li> 
      <li> <strong>导航2 </strong> 
      <span class="none"> 
      <ul> 
        <li> <a href="http://www.baidu.com/">baidu</a> </li> 
      </ul> 
      </span> </li> 
    </ul> 
    </div> 
    </body> 
    </html>