PROMULGATOR

    伊布桔岛

    上海市华东师范大学出口
    Html
    Css
    Js

    
                        


                        

                            


.dropbtn {
	display:inline-block;
        background-color:green;
	color:#c6e2ff;
	text-align:center;
	padding:14px 16px;
	text-decoration:none;
}
a:hover,.dropdown:hover .dropbtn {
	background-color:#104e8b;
}
.dropdown {
	display:inline-block;
}
.dropdown-content {
	display:none;
	position:absolute;
	background-color:white;
	min-width:160px;
	box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
	color:#36648b;
	padding:12px 16px;
	text-decoration:none;
	display:block;
}
.dropdown-content a:hover {
	background-color:#36648b;
	color:#f4a873;
}
.dropdown:hover .dropdown-content {
	display:block;
}


                        

                        



                        

                   

                    
                   

                       
↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

                       
 
  立即下载    

                       

                   


                

                


                

                     
 
                         

                            
不依赖任何框架的下拉菜单

                            

                                
	
                                      
                                                                      
                                    
                                    	
                                                                                                  	                             
                                    
                                                                       
                                

                            

                            

                        

                          

                             
                          

                         

                             
                             
dropbtn中定义显示下拉菜单按钮
<a href="#" class="dropbtn">
      dropdown
</a>
dropdown-content中定义隐藏的菜单内容
<div class="dropdown-content">
    <a href="#">
         link1
    </a>
    <a href="#">
         link2
    </a>
    <a href="#">
         link3
    </a>
</div>
在css文件中设置样式
.dropbtn {
	display:inline-block;
        background-color:green;
	color:#c6e2ff;
	text-align:center;
	padding:14px 16px;
	text-decoration:none;
}
/*鼠标悬浮在菜单上时，改变显示按钮的颜色*/
a:hover,.dropdown:hover .dropbtn {
	background-color:#104e8b;
}
/*隐藏菜单列表的初始样式*/
.dropdown-content {
	display:none;
	position:absolute;
	background-color:white;
	min-width:160px;
	box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);
}
/*隐藏菜单列表中链接（文字）的样式*/
.dropdown-content a {
	color:#36648b;
	padding:12px 16px;
	text-decoration:none;
	display:block;
}
/*鼠标悬浮在隐藏菜单列表的链接时，改变链接的样式*/
.dropdown-content a:hover {
	background-color:#36648b;
	color:#f4a873;
}

                         

                     

                   
                


                
0