CSS3下拉菜單特效是網(wǎng)頁(yè)設(shè)計(jì)中常見(jiàn)的特效之一,可以為網(wǎng)頁(yè)增添一份美感和用戶(hù)交互性。下面為大家介紹一種簡(jiǎn)單的CSS3下拉菜單特效代碼。
/*HTML代碼*/ <div class="dropdown"> <button class="dropbtn">Click Me!</button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> /*CSS3代碼*/ /*下拉菜單按鈕樣式*/ .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } /*下拉菜單容器樣式*/ .dropdown { position: relative; display: inline-block; } /*下拉菜單內(nèi)容樣式(默認(rèn)隱藏)*/ .dropdown-content { display: none; position: absolute; z-index: 1; } /*下拉菜單內(nèi)容樣式(鼠標(biāo)懸停顯示)*/ .dropdown:hover .dropdown-content { display: block; } /*下拉菜單鏈接樣式*/ .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } /*下拉菜單鏈接樣式(鼠標(biāo)懸停)*/ .dropdown-content a:hover { background-color: #f1f1f1; }
通過(guò)以上代碼,我們可以實(shí)現(xiàn)一個(gè)簡(jiǎn)單的CSS3下拉菜單特效,當(dāng)鼠標(biāo)懸停在按鈕上時(shí),下拉菜單內(nèi)容以動(dòng)畫(huà)方式展開(kāi)。此外,下拉菜單內(nèi)容中的鏈接也有相應(yīng)的樣式。