一种下拉菜单的实现方法，兼容IE firefox

基于web的应用程序设计中，下拉菜单是一般要实现的功能。本文将引导大家实现一种简易的基于js div css的下拉菜单，帮助学员快速的掌握实现的方法。代码中给出了设计方法与解释，如果有什么不能理解的地方请与我们联系。

图片1
效果图

html代码

css 代码

#topMenuDiv{
position:relative;
float:left;
border:#C5D9F1 1px solid;
border-top:none;
/*与页面的宽度一样，要好看一些*/
width:800px;
line-height:40px;
z-index:100;
background:#EBF3FB;
/*#008AE4-蓝色*/;
}
#topMenuUl{
float:none;
margin:0;
padding:0;
/*这两个决定菜单的高度*/
line-height:36px;
height:36px;
/*列表样式为无*/
list-style-type:none;
border-bottom:solid 4px #C5D9F1;
/*#ACACAC*/
width:100%;
}
#topMenuUl li{
float:left;
margin:0;
padding:0;
width:80px;
background:#EBF3FB;
/*当列表横起来后，充当块的右边界*/
border-right:solid 1px #C5D9F1;
/*必须要text-align:left,教学中作为调试，可修改给学生看align为right的情况*/
text-align:left;
}
#topMenuUl li a{
/*这里必须要用none,如果不用none,则下拉菜单会浮动到与主菜单同一水平位置*/
float:none;
/*a用block的方式呈现，所以a hover就成整体反色效果了*/
display:block;
/*这里必须要用100%，使每个a都充满所在的li的左右边界，否则下拉菜单的位置不对*/
width:100%;
text-decoration:none;
color:#000000;
margin:0;

/*必须要*/
/*主菜单队对齐方式与左padding与下拉菜单一致*/
text-align:left;
padding:0px 0px 0px 10px;
}
#topMenuUl li a:hover{
background:#C5D9F1;
}
.subMenu{
border-bottom:solid 1px #C5D9F1;
}
#topMenuUl li ul{
/*这个ul与上面的a都是父级下面的二个块，只要处理好这两个块的关系，下拉菜单的制作就很简单了*/
/*此处一定为absolute，根据层的相对与绝对浮动原理，就能使下拉菜单显示在下方*/
position:absolute;
/*刚载入时，所有的下拉菜单都不显示*/
display:none;

width:80px;
line-height:24px;
list-style-type:none;
margin:0px 0px 0px -1px;
padding:0px;
}
#topMenuUl li ul li{
float:left;
background:#EBF3FB;
border-left:solid 1px #C5D9F1;
border-right:solid 1px #C5D9F1;
/*border-top:solid 1px #C5D9F1;*/
border-bottom:solid 1px #C5D9F1;
margin:0px;
padding:0px;

}
#topMenuUl li ul li a{

/*这个宽度可以根据实际下拉菜单的文字宽度调整*/
width:120px;
margin:0px;
/*主菜单队对齐方式与左padding与下拉菜单一致*/
text-align:left;
padding:0px 0px 0px 10px;

/*width:80px;*/
}

js代码

//显示与处理下拉菜单
function showSubMenu(){
//取菜单所在的div
var objMainMenuDiv=document.getElementById('topMenuUl');
//在取得的div中取所有的超链接
var aObj=objMainMenuDiv.getElementsByTagName("a");
for(var i=0;i<aObj.length;i++){
  //不能直接用class 因为class是控件的内置属性，而ie与firefox取值时不兼容，因此自定义menuClass
  if(aObj[i].getAttribute("menuClass")=="subMenu"){
   //以a为中心,取a的外层li，通过外层li，取得与a平级的ul
   var objOuterLi=aObj[i].parentNode;
   var objInnerUl=objOuterLi.getElementsByTagName("ul");
   //如果没有子菜单
   if(objInnerUl.length<1){
    continue;
   }
   objOuterLi.onmouseover=function(){
    //注意，这里的var objInnerUl与上面的var objInnerUl=objOuterLi.getElementsByTagName("ul");
    //里的完全是两回事，这里是事件函数的定义，相当于写在此函数外面，与上面的objInnerUl根本没有什么关系，不要理解错了。
    var objInnerUl=this.getElementsByTagName("ul");
    objInnerUl[0].style.display="block";
   }
   objOuterLi.onmouseout=function(){
    var objInnerUl=this.getElementsByTagName("ul");
    objInnerUl[0].style.display="none";
    //alert(objInnerUl[0].style.display);
   }
  }
}
}

搜索

一种下拉菜单的实现方法，兼容IE firefox