css實(shí)現(xiàn)下拉菜單的案例

發(fā)布時(shí)間：2020-08-26 11:02:57 來(lái)源：億速云閱讀：102 作者：小新欄目：web開發(fā)

這篇文章主要介紹css實(shí)現(xiàn)下拉菜單的案例，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
/*盒子，相對(duì)定位*/
.dropdown{
display:inline-block;
position:relative;
}
button{
background-color:pink;
color:white;
border:none;
margin:6px;
padding:5px;
font-size:16px;
}
/*下拉內(nèi)容，絕對(duì)定位，初始不顯示，背景顏色為pink*/
.content{
display:none;
position:absolute;
background-color:pink;
min-width:160px;
box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);
z-index:1;
}
/*下拉內(nèi)容a鏈接樣式*/
.content a{
display:block;
color:white;
padding:12px 16px;
text-align:center;
}
/*鼠標(biāo)移到下拉菜單a鏈接時(shí)背景變?yōu)榛疑?/
.content a:hover{
background-color:gray;
}
button:hover{
background-color:gray;
}
/*鼠標(biāo)點(diǎn)擊盒子區(qū)域，顯示下拉菜單！*/
.dropdown:hover .content{
display:block;
}
</style>
</head>
<body>
<div class="dropdown">
<button>下拉菜單</button>
<div class="content">
<a herf="">首頁(yè)</a>
<a herf="">學(xué)習(xí)中心</a>
<a herf="">考試中心</a>
<a herf="">考試動(dòng)態(tài)</a>
</div>
</div>
</body>
</html>

運(yùn)行結(jié)果：

注意：

1.必須是在盒子上設(shè)置：hover，下拉菜單才會(huì)顯示，如果設(shè)置在button上，下拉菜單不顯示。

2.box-shadow：0px 8px 16px 0px rgba(0,0,0,0.2)為下拉菜單設(shè)置了陰影，右邊8像素，底部16像素，rgba前三個(gè)數(shù)字代表顏色，最后一個(gè)0.2代表透明度！

以上是css實(shí)現(xiàn)下拉菜單的案例的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

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

css實(shí)現(xiàn)下拉菜單的案例

猜你喜歡

最新資訊

相關(guān)推薦

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