* 下拉菜单，为了用户方便，可以自定义一二级菜单的鼠标移入移出颜色。
* 在IE6+，chrome，FF浏览器上测试通过。
* 唯一缺憾就是IE6下，下拉菜单无法遮挡底部文字。有兴趣的用户可以自行修改css样式。
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style>
*{margin:0;padding:0;list-style:none;}
p{clear:left;}
a{text-decoration: none;}
body{color:black;font-size:14px;}
#ceshi{width:100%;position:relative;z-index:999;}
#ceshi ul{width:100%;}
#ceshi ul li{float:left;width:200px;text-align:center;line-height:30px;height:30px;}
#ceshi ul li ul{display:none;}
#ceshi ul li ul li{width:200px;border-bottom:1px solid #ccc;text-align:center;line-height:30px;}
</style>
<script>
window.onload=function(){
function menu(divId,a,b,c,d,e,f,g,h){
var oDiv=document.getElementById(divId);
if (oDiv){
var oUl=oDiv.getElementsByTagName("ul");
var oLi1,oLi2;//一级li，二级li
var objColor={bgColor:[a,b,c,d],ftColor:[e,f,g,h]};
for (var i=1;i<oUl.length;i++){
oLi1=oUl[i].parentNode;
oLi1.style.backgroundColor=objColor['bgColor'][0];
oLi1.getElementsByTagName('a')[0].style.color=objColor['ftColor'][0];
oLi1.onmouseover=function(){
this.style.backgroundColor=objColor['bgColor'][1];
this.getElementsByTagName('a')[0].style.color=objColor['ftColor'][1];
this.getElementsByTagName('ul')[0].style.display='block';
};
oLi1.onmouseout=function(){
this.style.backgroundColor=objColor['bgColor'][0];
this.getElementsByTagName('a')[0].style.color=objColor['ftColor'][0];
this.getElementsByTagName('ul')[0].style.display='none';
};
oLi2=oUl[i].getElementsByTagName('li');
for(var j=0;j<oLi2.length;j++){
oLi2[j].style.backgroundColor=objColor['bgColor'][2];
oLi2[j].getElementsByTagName('a')[0].style.color=objColor['ftColor'][2];
oLi2[j].onmouseover=function(){
this.style.backgroundColor=objColor['bgColor'][3];
this.getElementsByTagName('a')[0].style.color=objColor['ftColor'][3];
};
oLi2[j].onmouseout=function(){
this.style.backgroundColor=objColor['bgColor'][2];
this.getElementsByTagName('a')[0].style.color=objColor['ftColor'][2];
};
}
}
}else{
alert('未找到 \"'+divId+'\" 对象');
}
}
menu('ceshi','#eee','#ddd','#eee','#2e2e2e','#222','#000','#777','#fff');
//ceshi为id
//第2个至第5参数为背景颜色，后四个参数为<A>字体颜色
//颜色列表分别为一级菜单鼠标移入前,一级菜单鼠标移入,二级菜单鼠标移入前,二级菜单鼠标移入
}
</script>
</head>
<body>
<div id=ceshi>
<ul>
<li><a href="">测试栏目a</a>
<ul><li><a href="">测试子栏目a</a></li><li><a href="">测试子栏目a测试子栏目a测试子栏目a测试子栏目a</a></li><li><a href="">测试子栏目a</a></li></ul>
</li>
<li><a href="">测试栏目b</a>
<ul><li><a href="">测试子栏目b</a></li><li><a href="">测试子栏目</a></li><li><a href="">测试子栏目</a></li></ul>
</li>
<li><a href="">测试栏目c</a>
<ul><li><a href="">测试子栏目c</a></li><li><a href="">测试子栏目</a></li><li><a href="">测试子栏目</a></li></ul>
</li>
</ul>
</div>
<p>
这是一段测试菜单是否遮挡数据的文字。<BR>
这是一段测试菜单是否遮挡数据的文字。<BR>
</p>
</body>
</html>
时间： 2024-10-17 18:25:54