91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

css實現下拉菜單的案例

發布時間:2020-08-26 11:02:57 來源:億速云 閱讀:107 作者:小新 欄目:web開發

這篇文章主要介紹css實現下拉菜單的案例,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
/*盒子,相對定位*/
.dropdown{
display:inline-block;
position:relative;
}
button{
background-color:pink;
color:white;
border:none;
margin:6px;
padding:5px;
font-size:16px;
}
/*下拉內容,絕對定位,初始不顯示,背景顏色為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;
}
/*下拉內容a鏈接樣式*/
.content a{
display:block;
color:white;
padding:12px 16px;
text-align:center;
}
/*鼠標移到下拉菜單a鏈接時背景變為灰色*/
.content a:hover{
background-color:gray;
}
button:hover{
background-color:gray;
}
/*鼠標點擊盒子區域,顯示下拉菜單!*/
.dropdown:hover .content{
display:block;
}
</style>
</head>
<body>
<div class="dropdown">
<button>下拉菜單</button>
<div class="content">
<a herf="">首頁</a>
<a herf="">學習中心</a>
<a herf="">考試中心</a>
<a herf="">考試動態</a>
</div>
</div>
</body>
</html>

運行結果:

css實現下拉菜單的案例

注意:

1.必須是在盒子上設置:hover,下拉菜單才會顯示,如果設置在button上,下拉菜單不顯示。

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

以上是css實現下拉菜單的案例的所有內容,感謝各位的閱讀!希望分享的內容對大家有幫助,更多相關知識,歡迎關注億速云行業資訊頻道!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

隆安县| 北辰区| 锡林郭勒盟| 稻城县| 凤庆县| 恩施市| 宁武县| 长寿区| 高密市| 襄城县| 田东县| 铜山县| 阿拉善盟| 德令哈市| 射阳县| 东明县| 金秀| 赫章县| 米脂县| 清苑县| 抚州市| 盐边县| 偃师市| 营山县| 株洲县| 乌审旗| 咸阳市| 丰都县| 太仓市| 板桥市| 泰安市| 和平区| 兴文县| 铁力市| 大关县| 体育| 汕头市| 瑞丽市| 睢宁县| 三亚市| 吴桥县|