首页 > 代码库 > 下拉菜单：可快速定义一二级菜单颜色
下拉菜单：可快速定义一二级菜单颜色
* 下拉菜单，为了用户方便，可以自定义一二级菜单的鼠标移入移出颜色。
* 在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=http://www.mamicode.com/"">测试栏目a>
下拉菜单：可快速定义一二级菜单颜色
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。