下拉菜單是網(wǎng)頁中常見的一種交互式效果，能夠通過鼠標(biāo)懸停或點(diǎn)擊展開菜單，提供更多的選擇。下面是一個(gè)簡(jiǎn)單的 CSS 下拉菜單效果的示例：
首先，我們使用.dropdown樣式將下拉菜單元素設(shè)置為相對(duì)定位，并使其顯示為行內(nèi)塊元素。當(dāng)鼠標(biāo)懸停在這個(gè)元素上時(shí)，我們使用.dropdown:hover .dropdown-menu樣式來將下拉菜單元素顯示出來。
接下來，我們使用.dropdown-menu樣式定義下拉菜單元素的基本樣式，它的display屬性被設(shè)置為none，代表默認(rèn)情況下下拉菜單是隱藏的。這個(gè)元素是絕對(duì)定位的，并設(shè)置了一些其他的樣式屬性。我們還可以定義下拉菜單中每個(gè)選項(xiàng)的樣式，例如背景顏色等。
最后，我們?cè)?HTML 中添加一個(gè)帶有下拉菜單的示例代碼。當(dāng)用戶點(diǎn)擊或懸停在菜單上時(shí)，該下拉菜單將被觸發(fā)并可以進(jìn)行選擇。