不可逾越的li

不可逾越的li

今天制作了一个Javascript的popMenu动画特效，类似于SF上的那种效果，但是很遗憾，现在还只能在Gecko引擎的浏览器下运行，而且还有一点不小的问题，在IE6中出现各种诡异的问题，我更是无从下手。

首先，我是把这样一个onmouseover事件绑到一个带有padding的链接上，出问题了。在IE6里，这个事件，包括onclick、onmouseout都不能被触发。而当我把事件放到一个普通的链接上，所有事件都可以被触发，不明白。

这是其一，另外在IE6中CSS的问题也不小，position:relative的时候得出的结果简直就是不着边际，这个问题简直没指望。

所以只能放弃IE了。在Firefox上也有个小问题。我把onmouseover事件绑定到菜单按钮上，把onmouseout事件绑到菜单本身上。
但是当鼠标移到div内的两个li之间的时候，居然触发了div的onmouseout事件，我只是百思不得其解，而且也找不到什么好的替代办法来解决这个问题，只能振臂高呼上帝的名字了。这li之间的鸿沟真的不可逾越吗？？

相关代码如下：
HTML片段

    <div class="guide" id="top_guide">
      <ul class="guideMenu">
        <li><a href="#" class="guideMenu_link">MenuItem0</a></li>
        <li><a href="content.html" class="guideMenu_link">MenuItem1</a></li>
        <li><a href="#" class="guideMenu_link">MenuItem2</a></li>
        <li><a href="#" class="guideMenu_link">MenuItem3</a></li>
        <li><a href="#" class="guideMenu_link">MenuItem4</a></li>
      </ul>
      <div class="popMenuDefault" id="forMenu0">
        <ul class="popMenu">
          <li class="popMenuItem">subMenuItem0</li>
          <li class="popMenuItem">subMenuItem1</li>
          <li class="popMenuItem">subMenuItem2</li>
        </ul>
      </div>
      <div class="popMenuDefault" id="forMenu2">
        <ul class="popMenu">
          <li class="popMenuItem">subMenuItem0</li>
          <li class="popMenuItem">subMenuItem1</li>
          <li class="popMenuItem">subMenuItem2</li>
        </ul>
      </div>
    </div>

CSS片段

.guide{
  position:relative;
  width:770px;
  background:#C00;
  text-align:center;
  padding:12px 0 12px 0;
  }
  .guideMenu{
    list-style:none;
    font-size:14px;
    color:#FFF;
    }
    .guideMenu li{
      display:inline;
      }
      a.guideMenu_link:link,a.guideMenu_link:visited{
        padding:0 20px 0 20px;
        color:#FFF;
        }
      a.guideMenu_link:hover{
        padding:0 19px 0 19px;
        border:1px #FFF solid;
        background-color:#C00;
        text-decoration:none;
        }
  div.popMenuDefault{
    display:none;
    background-color:#C00;
    color:#FFF;
    }
    div.popMenuDefault div{
      height:100%;
      }
      ul.popMenu{
        list-style:none;
        display:none;
        }
        li.popMenuItem{
          position:static;
          line-height:150%;
          }

JavaScript

load = function(){
  var items = ElementById("top_guide").getElementsByTagName("ul")[0].getElementsByTagName("li");
  for(var i=0;i<items.length;i++){
    if("#" == items[i].getElementsByTagName("a")[0].href.charAt(items[i].getElementsByTagName("a")[0].href.length-1)){
      items[i].getElementsByTagName("a")[0].setAttribute("onclick","return false;");
      items[i].getElementsByTagName("a")[0].setAttribute("onmouseover","popmenu("+ i +");");
    }
  }
  var divs = ElementById("top_guide").getElementsByTagName("div");
  for(var i=0;i<divs.length;i++){
    divs[i].getElementsByTagName("ul")[0].setAttribute("onmouseout","killpop();");
  }
};

function popmenu(index){
  killpop();
  var requiredId = "forMenu"+index;
  var pop;
  //alert(requiredId);
  if(!(pop = ElementById(requiredId))){
    //alert(" ");
    return false;
  }
  var  targetHeight = 20 * ElementsByTagName("ul")[0].getElementsByTagName("li").length;
  //alert(pop);
  pop.style.position = "absolute";
  pop.style.zIndex = "100";
  p = "40px";
  pop.style.left = 100 + 115*index + "px";
  pop.style.width = "120px";
  pop.style.height = "0";
  pop.style.display = "block";
  ElementsByTagName("ul")[0].style.display = "none";
  popShow(requiredId, targetHeight, 10);
  ElementsByTagName("ul")[0].style.display = "block";
}

function killpop(){
  var divs = ElementById("top_guide").getElementsByTagName("div");
  for(var i=0;i<divs.length;i++){
    if(divs[i].style.display == "block"){
      var requiredId = divs[i].getAttribute("id");
      var pop = divs[i];
      ElementsByTagName("ul")[0].style.display = "none";
      popShow(requiredId, 0, 10);
      pop.style.display = "none";
    }
  }
}

function popShow(elementId, target, interval){
  var element = ElementById(elementId);
  var height = parseInt(element.style.height);
  vement){
    vement);
  }
  if(height == target){
    return true;
  }
  if(height > target){
    var dist = il((height - target)/10);
    height -= dist;
  }
  if(height < target){
    var dist = il((target - height)/10);
    height += dist;
  }
  element.style.height = height + "px";
  var repeat = "popShow('" + elementId + "'," + target + "," + interval +")";
  vement = setTimeout(repeat, interval);
}