【求助】javascript 写一段代码在FF浏览器中不支持,什么原因
自己利用DIV+CSS+JS写了一段下拉菜单导航栏,在IE中正常,但在FF中,无下拉,怀疑是JS问题,请高人指点下:js部分:
window.onload = initMenu;
function initMenu() {
assembleMenu(document.getElementById("navigation"));
}
function assembleMenu(uLParentNode) {
var theUL = uLParentNode.getElementsByTagName("ul")[0];
var theULChilds = theUL.childNodes;
for (var i=0; i<theULChilds.length; i++) {
if (theULChilds[i].tagName == "LI") {
var theLINode = theULChilds[i];
if (hasNextLevelMenu(theLINode)) {
setMouseActions(theLINode);
assembleMenu(theLINode);
}
}
}
function hasNextLevelMenu(node) {
return node.getElementsByTagName("ul").length > 0;
}
function setMouseActions(node) {
node.onmouseover = function() {
this.getElementsByTagName("ul")[0].style.display = "block";
this.firstChild.style.backgroundColor= "#B33831";
};
node.onmouseout = function() {
this.getElementsByTagName("ul")[0].style.display = "none";
this.firstChild.style.backgroundColor= "#A3322D";
};
}
}
CSS部分:
#navigation{margin:5px auto 0px;background-color:#FFF999; height:24px; width:960px;}
#navigation ul{margin:0;padding:0;}
#navigation ul li{position: relative; list-style-type:none;float:left;width: 90px; font-weight:bold;}
#navigation ul li ul{position: absolute; display:none; border-bottom:1px solid #000;}
#navigation ul li ul li {background:#AEAEAE; text-align:left;}
#navigation ul li a {text-decoration: none;color:#FFF;display: block;padding:5px;}
#navigation ul li a:hover {color:#FFF;}
#navigation ul li ul li a{text-decoration: none; color:#FFF; display: block; }
#navigation ul li ul li a:hover{color:black; }
网页部分:
<div id="navigation">
<ul>
<li><a href="">首页</a></li>
<li><a href="">新闻资讯</a></li>
<ul>
<li><a href="">国内新闻</a></li>
<li><a href="">国际新闻</a></li>
<li><a href="">社会热点</a></li>
<li><a href="">时事评论</a></li>
</ul>
<li><a href="">影视娱乐</a></li>
<ul>
<li><a href="">电视前沿</a></li>
<li><a href="">电影快报</a></li>
<li><a href="">影视明星</a></li>
</ul>