<!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>
運行結果：
注意：
1.必須是在盒子上設定：hover，下拉式功能表才會顯示，如果設定在button上，下拉式功能表不顯示。
2.box-shadow：0px 8px 16px 0px rgba(0,0,0,0.2)為下拉式功能表設定了陰影，右邊8像素，底部16像素，rgba前三個數字代表顏色，最後一個0.2代表透明度！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
