css+html+js实现下拉及多级弹出菜单

浏览数：25 / 时间：2015年06月09日

本文将使用css+html+js实现横向菜单，具有下拉的多级弹出菜单。

首先我们来看看效果图：

首先应该写html部分的代码，代码比较简单，代码如下：

<body>
    
    <div id="menu">
      <ul>
        <li><a href="#" id="current">首页</a></li>
        <li><a href="#">网页版式</a>
          <ul>
            <li><a href="#">自适应宽度</a></li>
            <li><a href="#">固定宽度</a></li>
          </ul>
        </li>
        
        <li><a href="#">web教程</a>
          <ul>
            <li><a href="#">新手入门</a></li>
            <li><a href="#">视频教程</a></li>
            <li><a href="#">常见问题</a></li>
          </ul>
        </li>
        
        <li><a href="#">web实例</a></li>
        <li><a href="#">常用代码</a></li>
      </ul>
    </div>
    
    
    
    <div  id="s1">
      <ul>
         <li><a href="#">软件工程</a>
           <ul>
            <li><a href="#">java ee</a></li>
            <li><a href="#">c</a></li>
           </ul>
         </li>
         
         <li><a href="#">程序语言</a>
           <ul>
            <li><a href="#">android</a></li>
            <li><a href="#">java</a></li>
           </ul>
         </li>
         
      </ul>
    </div>
    
    
    
  </body>

接着写css的代码，代码中都有注释，方便阅读和理解：

<style type="text/css">


body { 
  font-family: Verdana; /*  字体*/
  font-size: 12px; /*  字体大小*/
  line-height: 1.5; /*行高  */
  }
  
a { 
  color: #000; /* 正常时的颜色 */
  text-decoration: none; /*取消下划线  */
  }
  
a:hover { 
color: #F00; /* 鼠标经过时显示的颜色 */
}

#menu { 
  width:500px; /* div的宽度 */
  height:28px; /* 高度 */
  margin:0 auto; /* 水平居中 */
  border-bottom:3px solid #E10001;/*设置底端线  */
  }
  
#menu ul { 
  list-style: none; /* 取消列表样式 */
  margin: 0px; /*外边距为0  */
  padding: 0px; /*内边距为0  */
  }
  
  
#menu ul li { 
  float:left; /* 水平浮动 */
  margin-left:2px;/*左边外边距为2px  */
  }
  
#menu ul li a { 
  display:block; 
  width:87px; 
  height:28px; 
  line-height:28px; 
  text-align:center; 
  background:url(./m14.jpg) 0 0 no-repeat;
  font-size:14px;
  }
  
#menu ul li a:hover { 
  background:url(./m13.jpg) 0 0 no-repeat;
  }
  
#menu ul li a#current { 
  background:url(./m12.jpg) 0 0 no-repeat; 
  font-weight:bold; 
  color:#fff;
  }
  
#menu ul li ul { 
  border:1px solid #ccc; 
  display:none; 
  position:absolute;
  }
  
  
#menu ul li ul li { 
  float:none; 
  width:87px; 
  background:#eee; 
  margin:0;
  }
  
#menu ul li ul li a { 
  background:none;
  }
  
#menu ul li ul li a:hover { 
  background:#333; 
  color:#fff;
  }
  
#menu ul li:hover ul { 
  display:block;
  }
  
#menu ul li.sfhover ul { 
  display:block;
  }







#s1{
   background-color: pink;
   width:180px;
   border:2px solid red;
   position:relative;
   left:200px;
   top:190px;
   height:60px;
}


#s1 ul li{
  list-style-type: none;
  height:25px;
  width:50px;
  background-color: #0ff;
  float:left;
  margin:10px;
}


#s1 ul li ul{
  display:none;
  position:absolute;
}


#s1 ul li:HOVER ul{
    display:block;
    background-color: blue;
    margin:0px;
    padding:0px;
    /* width:100px; */
}

#s1 ul li.sfhover ul { 
  display:block;
  margin:0px;
  padding:0px;
  }


#s1 ul li ul li{
   border:1px solid red;
   float:none;
   margin:0px;
   width:50px;
   
} 






</style>

完成上面的步骤后，可以进行测试了，你会发现，上面的代码只在谷歌浏览器可以操作正常，能够实现下拉菜单，但是在ie和其他的浏览器，不能正常使用下拉菜单，浏览器不兼容引起的，所以为了写出兼容所有浏览器的菜单，还需js代码的控制。js代码如下；

<script type="text/javascript">
  function menuFix() {
      var sfEls = document.getElementById("menu").getElementsByTagName("li");
      var sfEls2 = document.getElementById("s1").getElementsByTagName("li");
      for (var i=0; i<sfEls.length; i++) {
           sfEls[i].onmouseover=function() {
           this.className+=(this.className.length>0? " ": "") + "sfhover";
       };
           sfEls[i].onMouseDown=function() {
           this.className+=(this.className.length>0? " ": "") + "sfhover";
         };
          sfEls[i].onMouseUp=function() {
         this.className+=(this.className.length>0? " ": "") + "sfhover";
        };
        sfEls[i].onmouseout=function() {
        this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), 
             "");
          };
          }
          
          
          for (var i=0; i<sfEls2.length; i++) {
           sfEls2[i].onmouseover=function() {
           this.className+=(this.className.length>0? " ": "") + "sfhover";
       };
           sfEls2[i].onMouseDown=function() {
           this.className+=(this.className.length>0? " ": "") + "sfhover";
         };
          sfEls2[i].onMouseUp=function() {
         this.className+=(this.className.length>0? " ": "") + "sfhover";
        };
        sfEls2[i].onmouseout=function() {
        this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), 
             "");
          };
          }
          
 }
window.onload=menuFix;




</script>

现在就可以运行正常了，会出现本文开始显示的效果，由于是做测试的，所以有些css代码没有去掉，主要是方便调试