原生js實(shí)現(xiàn)下拉選項(xiàng)卡的方法

發(fā)布時(shí)間：2020-05-20 17:08:54 來源：億速云閱讀：256 作者：鴿子欄目：web開發(fā)

先來看一下實(shí)現(xiàn)效果：

代碼如下：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8" />
 <title>下拉選項(xiàng)卡</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>計(jì)科系</li>
 <li>電氣系</li>
 <li>食品系</li>
 <li>機(jī)械系</li>
 </ul>
 </li>
 <li>
 學(xué)科
 <ul>
 <li>無線傳感網(wǎng)</li>
 <li>計(jì)算機(jī)組成原理</li>
 <li>java程序設(shè)計(jì)</li>
 <li>c語言</li>
 </ul>
 </li>
 <li>
 專業(yè)
 <ul>
 <li>物聯(lián)網(wǎng)工程</li>
 <li>軟件工程</li>
 <li>計(jì)算機(jī)應(yīng)用</li>
 <li>計(jì)算機(jī)科學(xué)</li>
 </ul>
 </li>
 <li>
 實(shí)驗(yàn)室
 <ul>
 <li>物聯(lián)網(wǎng)實(shí)驗(yàn)室</li>
 <li>嵌入實(shí)驗(yàn)室</li>
 <li>軟件工程實(shí)驗(yàn)室</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實(shí)現(xiàn)下拉選項(xiàng)卡的詳細(xì)內(nèi)容，更多請關(guān)注億速云其它相關(guān)文章！

向AI問一下細(xì)節(jié)

原生js實(shí)現(xiàn)下拉選項(xiàng)卡的方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽