CSS下拉菜單是網頁中常見的一種導航方式,下面是如何使用CSS來制作下拉菜單的簡介。
HTML結構: <div class="dropdown"><button class="dropbtn">菜單標題</button><div class="dropdown-content"><a href="#">選項1</a><a href="#">選項2</a><a href="#">選項3</a></div></div>CSS樣式: .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; z-index: 1; } .dropdown:hover .dropdown-content { display: block; }
HTML中的<div>元素包含一個按鈕和下拉菜單內容。CSS定義了下拉菜單的位置和展示方式。通過鼠標懸停在按鈕上,下拉菜單就會顯示出來。
在HTML中添加選項可以通過添加更多的<a>標簽實現。