二級下拉菜單在網頁設計中是一個很常見的功能。通過使用CSS,我們可以很方便地創建一個漂亮的二級下拉菜單,提升網站的用戶體驗。
/* 一級菜單樣式 */ .dropdown { position: relative; display: inline-block; } /* 二級菜單樣式 */ .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 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; }
以上是一個基本的二級下拉菜單的CSS樣式。實現時需要在HTML中使用相應的類名,例如:
<div class="dropdown"> <a href="#">菜單1</a> <div class="dropdown-content"> <a href="#">選項1</a> <a href="#">選項2</a> <a href="#">選項3</a> </div> </div>
通過上述代碼和CSS樣式,我們就可以輕松地創建一個漂亮的二級下拉菜單了。