二級下拉導航欄是網頁設計中常見的一種導航欄形式,它可以讓用戶更方便地瀏覽網站的不同欄目和頁面。在 CSS 中實現二級下拉導航欄,需要使用<ul>
和<li>
標簽,以及 CSS 中的絕對定位和顯示/隱藏屬性。
.navbar { position: relative; background-color: #333; height: 40px; } .navbar ul { list-style-type: none; margin: 0; padding: 0; } .navbar li { display: inline-block; padding: 10px; color: #fff; } .navbar li:hover { background-color: #555; } .navbar li ul { display: none; position: absolute; left: 0; top: 40px; background-color: #555; } .navbar li:hover ul { display: block; } .navbar li ul li { display: block; padding: 5px; color: #fff; }
以上代碼中,.navbar
是導航欄的樣式類名,<ul>
和<li>
分別表示列表和列表項。導航欄使用相對定位,而下拉菜單使用絕對定位,使其固定在導航欄下方。初始狀態下,下拉菜單的display
屬性為none
,表示隱藏。當鼠標移動到導航欄某個列表項上時,對應的下拉菜單<ul>
的display
屬性變為block
,表示顯示。
通過以上代碼,我們可以實現一個簡單的二級下拉導航欄,可以根據需要進行進一步的樣式調整和優化。
上一篇九宮格的css實現
下一篇css選擇器由什么組成