溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

html如何實(shí)現(xiàn)二級(jí)選項(xiàng)卡

發(fā)布時(shí)間：2021-02-20 13:57:04 來(lái)源：億速云 閱讀：207 作者：小新 欄目：web開發(fā)

這篇文章主要介紹了html如何實(shí)現(xiàn)二級(jí)選項(xiàng)卡，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

html實(shí)現(xiàn)二級(jí)選項(xiàng)卡的方法：首先打開寫網(wǎng)頁(yè)代碼的軟件，并新建一個(gè)html網(wǎng)頁(yè)文件，在body里寫上html代碼；然后在【<style>】標(biāo)簽里寫上css代碼即可。

html實(shí)現(xiàn)二級(jí)選項(xiàng)卡的方法：

1、打開寫網(wǎng)頁(yè)代碼的軟件，并新建一個(gè)html網(wǎng)頁(yè)文件，在body里寫上html代碼：

<body>
<div class="a">
<ul>
<li>
<a href="#">一級(jí)</a>
<ul class="d">
<li><a href="#">二級(jí)</a></li>
<li><a href="#">二級(jí)</a></li>
</ul>
</li>
</ul>
</div>
</body>

2、在<style></style>里寫上css代碼：

    <style type="text/css">
.a ul li ul{
display: none;/*將 二級(jí) 菜單隱藏起來(lái)*/
}
.a ul li:hover ul{
display: block;/*當(dāng)鼠標(biāo)移動(dòng)到一級(jí)標(biāo)簽后，ul即二級(jí)菜單顯示出來(lái)*/
}
    </style>

3、保存運(yùn)行后如圖，當(dāng)鼠標(biāo)放上一級(jí)菜單后顯示二級(jí)出來(lái)，完成全部步驟

html如何實(shí)現(xiàn)二級(jí)選項(xiàng)卡

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“html如何實(shí)現(xiàn)二級(jí)選項(xiàng)卡”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

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

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手