CSS3下拉菜單特效是網頁設計中常見的特效之一,可以為網頁增添一份美感和用戶交互性。下面為大家介紹一種簡單的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; } /*下拉菜單內容樣式(默認隱藏)*/ .dropdown-content { display: none; position: absolute; z-index: 1; } /*下拉菜單內容樣式(鼠標懸停顯示)*/ .dropdown:hover .dropdown-content { display: block; } /*下拉菜單鏈接樣式*/ .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } /*下拉菜單鏈接樣式(鼠標懸停)*/ .dropdown-content a:hover { background-color: #f1f1f1; }
通過以上代碼,我們可以實現一個簡單的CSS3下拉菜單特效,當鼠標懸停在按鈕上時,下拉菜單內容以動畫方式展開。此外,下拉菜單內容中的鏈接也有相應的樣式。