原生js实现下拉选项卡

本文实例为大家分享了js实现下拉选项卡的具体代码，供大家参考，具体内容如下

效果如下：

代码如下：

 
 
 
 
 *{
 padding: 0px;
 margin: 0px;
 font-family: "微软雅黑";
 font-size: 12px;
 }
 ul{
 list-style: none;
 }
 .head{
 width: 1000px;
 height: 50px;
 margin: 0px auto;
 background-color: greenyellow;
 }
 .head>ul{
 display: block;
 }
 .head>ul>li{
 float: left;
 width: 200px;
 text-align: center;
 height: 50px;
 line-height: 50px;
 font-size: 15px;
 }
 .head>ul>li:hover{
 background-color: green;
 }
 .head>ul>li:hover>ul{
 display: block;
 }
 .head>ul>li>ul{
 display: none;
 position: absolute;
 }
 .head>ul>li>ul>li{
 height: 40px;
 width: 200px;
 text-align: center;
 line-height: 40px;
 font-size: 15px;
 background-color: greenyellow;
 margin-top: 5px;
 }
 .head>ul>li>ul>li:hover{
 background-color: green;
 }
 
 
 
 
 

 

 院系
 

 
计科系
 
电气系
 
食品系
 
机械系
 
 
 

 学科
 

 
无线传感网
 
计算机组成原理
 
java程序设计
 
c语言
 
 
 

 专业
 

 
物联网工程
 
软件工程
 
计算机应用
 
计算机科学
 
 
 

 实验室
 

 
物联网实验室
 
嵌入实验室
 
软件工程实验室
 
扮客人才孵化基地
 
 
 

 宿舍
 

 
617宿舍
 
618宿舍
 
619宿舍
 
620宿舍
 
 
 
 
 

如果大家还想深入学习，可以点击两个精彩的专题：javascript选项卡操作方法汇总 jquery选项卡操作方法汇总

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。