实现简单的下拉菜单功能的三种方法

这篇文章主要介绍了js,jq,css多方面实现简易下拉菜单功能,需要的朋友可以参考下

效果图预览

一 、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部分（实现方法一）

 
  
  
  
 
 
  

   

    首页
   
   

    菜单一
    

     
内容一
     
内容一
     
内容一
    
   
   

    菜单二
    

     
内容二
     
内容二
     
内容二
    
   
   

    菜单三
    

     
内容三
     
内容三
     
内容三
    
   
   

    菜单四
   
  
  
 

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

 
  
  
 
 
  

   

    

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

   

    
内容一
    
内容二
    
内容三
    
内容四

							

								
								

									BJXSHOP网上开店专家
									
BJXShop网上购物系统是一个高效、稳定、安全的电子商店销售平台，经过近三年市场的考验，在中国网购系统中属领先水平；完善的订单管理、销售统计系统；网站模版可DIY、亦可导入导出；会员、商品种类和价格均实现无限等级；管理员权限可细分；整合了多种在线支付接口；强有力搜索引擎支持... 程序更新：此版本是伴江行官方商业版程序，已经终止销售，现于免费给大家使用。比其以前的免费版功能增加了：1，整合了论坛
								
								下载 
							
						
   

  

 
 

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 a{
 display: block; 
}
.menu li a:hover{
 background-color: burlywood;
}
.menu li ul{
 display: none;
 position: absolute;
 left: 0;
}
.menu li ul li{
 width: 100%;
 margin-top: 2px;
 background-color: darkgray;
}
.menu li ul li:hover{
 cursor: pointer;
 background-color: chartreuse;
}

三、JQ实现

html和jq部分

 
  
  
  
 
 
  

   

    首页
   
   

    菜单一
    

     
内容一
     
内容一
     
内容一
    
   
   

    菜单二
    

     
内容二
     
内容二
     
内容二
    
   
   

    菜单三
    

     
内容三
     
内容三
     
内容三
    
   
   

    菜单四
   
  
  
  
 

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 a{
 display: block; 
}
.menu li a:hover{
 background-color: burlywood;
}
.menu li ul{
 display: none;
 position: absolute;
 left: 0;
}
.menu li ul li{
 width: 100%;
 margin-top: 2px;
 background-color: darkgray;
}
.menu li ul li:hover{
 cursor: pointer;
 background-color: chartreuse;
}

【相关推荐】

1. 特别推荐：“php程序员工具箱”V0.1版本下载

2. 免费html在线视频教程

3. php.cn原创html5视频教程