js,jq,css多方面实现简易下拉菜单功能的示例分析

这篇文章主要介绍js,jq,css多方面实现简易下拉菜单功能的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

成都网络公司-成都网站建设公司创新互联十载经验成就非凡，专业从事网站制作、成都网站建设，成都网页设计，成都网页制作，软文推广，一元广告等。十载来已成功提供全面的成都网站建设方案，打造行业特色的成都网站建设案例，建站热线：028-86922220，我们期待您的来电！

效果图预览

一 、css实现

html代码部分

 
  
  
  
 
 
  
   

    首页
   
   

    菜单一
    

     
内容一
     
内容一
     
内容一
    
   
   

    菜单二
    

     
内容二
     
内容二
     
内容二
    
   
   

    菜单三
    

     
内容三
     
内容三
     
内容三
    
   
   

    菜单四
   
  
 

css部分

*{
 padding: 0;
 margin: 0;
}
a{
 text-decoration: none;
 color: #000;
}
ul,li{
 list-style: none;
}
.menu{
 margin: 50px auto;
 width: 500px;
 height: 35px;
 background-color: #ccc;
 text-align: center;
 line-height: 35px;
}
.menu li{
 float: left;
 width: 20%;
 position: relative;
}
.menu li:hover ul{
 display: block;
}
.menu li a{
 display: block; 
}
.menu li a:hover{
 background-color: burlywood;
}
.menu li ul{
 display: none;
 position: absolute;
}
.menu li ul li{
 width: 100%;
 margin-top: 2px;
 background-color: darkgray;
}
.menu li ul li:hover{
 cursor: pointer;
 background-color: chartreuse;
}

二、js实现

html和js部分（实现方法一）

 
  
  
  
 
 
  
   

    首页
   
   

    菜单一
    

     
内容一
     
内容一
     
内容一
    
   
   

    菜单二
    
     
内容二
     
内容二
     
内容二
    
   
   

    菜单三
    
     
内容三
     
内容三
     
内容三
    
   
   

    菜单四
   
  
      
   window.onload = function(){ 
    function $(id){
     return typeof id == "string"?document.getElementById(id):id; 
    }
    var menu_li = $("menu").getElementsByTagName("li");    
    for(var i = 0; i < menu_li.length; i++){
     menu_li[i].onmouseover = function(){
      var ss = this.getElementsByTagName("ul")[0];
      if(ss != undefined){
       ss.style.display = "block";
      }
     }
    }
    for(var j = 0; j < menu_li.length; j++){
     menu_li[j].onmouseout = function(){
      var ssa = this.getElementsByTagName("ul")[0];
      if(ssa != undefined){
       ssa.style.display = "none";
      }     
     }
    }    
   }         
  
 

html和js部分（实现方法二）

 
  
  
 
 
  
   
    

     标题一
     
标题二
     
标题三
     
标题四