三级菜单不能在firefox下使用

http://cross-browser.com/x/menus/xmenu3_1.html
看看这个例子吧，这个用起来简单，代码组织的也好

解决方案 »

  1.   

    里面用了FireFox不支持的方法。网上很多所有浏览器兼容的菜单的
      

  2.   

    firefox可以打开第一层，第二层打不开了。
    点击也无效,firefox说要用document.getElementById取值。
      

  3.   

    我给你一个，zhiin和我修改自w3的菜单，虽然效果没那么炫，不过通过了opera,mozilla,ie
    最新版的测试<script type="text/javascript">startList.tag = 0;
    function startList(rootObj)
    {
    var navRoot, i=0;
    if(rootObj == '' || rootObj == null) rootObj=getObjectById('navitree'); try
    {
    navRoot = rootObj;
    if(navRoot==null)
    {
    alert('null a wrong accoured');
    }
    else 
    {
    for (i=0; i<navRoot.childNodes.length; i++) 
    {
    node = navRoot.childNodes[i];
    if (node.nodeName=="LI") 
    {
    node.onmouseover=function() 
    {
    this.className ="over";//info.innerHTML = this.innerHTML;
    }
    node.onmouseout=function() 
    {
    this.className="out";
    //info.innerHTML = this.innerHTML;
    }
    if(startList.tag==1)
    {
    node.className = "out";
    }
    startList(node);
    }
    else if (node.nodeName=="UL")
    {  
    startList.tag = 1;
    startList(node);
    }
    } //for end
    }
    } //try end
    catch(e)
    {
    alert(e);
    } //catch end
    } //startListgetObjectById = function(id)
      {
        if (typeof(id) != "string" || id == "") return null;
        if (document.getElementById) return document.getElementById(id);
        if (document.all) return document.all(id);
        try {return eval(id);} catch(e){ return null;}
    }
    </script><style type="text/css">
    body { font-size: 12px; font-family: 'Courier New';}.navitree 
    a { display: block;
    padding: 5px;
    text-decoration: none;
        background: #ddd; color: #000;
    }
    .navitree a:hover { background: #880; color: #fff;}
    .navitree { width: 450px;}
    .navitree {
    border-width: 0px 1px 1px 0px ; border-style:solid; border-color:black;
    float:left;
    margin: 0px; padding: 0px;
    list-style-type: none;
    }
    .navitree ul {
    border-width: 0px 1px 1px 0px ; border-style:solid; border-color:black;
    width:150px;
    margin: 0px; padding: 0px;
    list-style-type: none;
    }
    .navitree li {
    border-width: 1px 0px 0px 1px ; border-style:solid; border-color:black;
    position: relative; width: 149px; padding: 0px; float: left; background: #fff;
    }
    .navitree li ul li {
    position: relative; width: 149px; padding: 0px; float: left;
    }
    .navitree li ul {
    display: none; position: absolute; left: -1px;
    }
    .navitree li ul li ul {
    position: absolute; left: 149px; top: -1px;
    /* Set 1px less than menu width */
    }li.over ul { display: block; visibility: visible;}
    li.out ul { visibility: hidden; /* 比用 display:none 效率会高 */}
    </style>
    <BODY>
    <ul id="navitree" class="navitree">
    <li><a href="#">home</a></li>
    <li>
    <a href="#">about &gt;</a>
    <ul id="second">
    <li><a href="#">history</a></li>
    <li><a href="#">team</a></li>
    <li><a href="#">offices</a></li>
    </ul>
    </li>
    <li>
    <a href="#">services &gt;</a>
    <ul>
    <li>
    <a href="#">web design &gt;</a>
    <ul>
    <li><a href="#">web design - sub1</a></li>
    <li><a href="#">web design - sub2</a></li>
    <li>
    <a href="#">web deisgn - sub3 &gt;</a>
    <ul>
    <li><a href="#">sub3-1</a>
    <li><a href="#">sub3-2</a>
    </ul>
    </li>
    </ul>
    </li>
    </ul>
    </li>
    </ul><TEXTAREA NAME="info" id="info" ROWS="20" COLS="80"></TEXTAREA></BODY>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    startList();
    //-->
    </SCRIPT>