如何使用原生js实现下拉选项卡

互联网 20-4-27

先来看一下实现效果：

代码如下：

<!DOCTYPE html> <html>  <head>  <meta charset="utf-8" />  <title>下拉选项卡</title>  <style>  *{  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;  }  </style>  </head>  <body>  <div class="head">  <ul>  <li>  院系  <ul>  <li>计科系</li>  <li>电气系</li>  <li>食品系</li>  <li>机械系</li>  </ul>  </li>  <li>  学科  <ul>  <li>无线传感网</li>  <li>计算机组成原理</li>  <li>java程序设计</li>  <li>c语言</li>  </ul>  </li>  <li>  专业  <ul>  <li>物联网工程</li>  <li>软件工程</li>  <li>计算机应用</li>  <li>计算机科学</li>  </ul>  </li>  <li>  实验室  <ul>  <li>物联网实验室</li>  <li>嵌入实验室</li>  <li>软件工程实验室</li>  <li>扮客人才孵化基地</li>  </ul>  </li>  <li>  宿舍  <ul>  <li>617宿舍</li>  <li>618宿舍</li>  <li>619宿舍</li>  <li>620宿舍</li>  </ul>  </li>  </ul>  </div>  </body> </html>

推荐教程：js教程

以上就是如何使用原生js实现下拉选项卡的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签：选项卡