使用css選擇器可實現下拉菜單交互效果，無需JavaScript。1. 使用:hover偽類實現懸停顯示，適合pc端，代碼為.menu-item:hover .dropdown { display: block; }，但不適用于移動端；2. 使用:focus-within偽類實現鍵盤友好型菜單，適合無障礙設計，代碼為.menu-item:focus-within .dropdown { display: block; }，需配合tabindex使用；3. 使用隱藏復選框+:checked偽類實現點擊切換，結構需包含input和label，代碼為#menu-toggle:checked ~ #menu-content { display: block; }，支持展開/收起但樣式需自定義。每種方法均有局限，復雜功能仍需javascript。
下拉菜單在網頁中很常見，比如導航欄里的“更多選項”、用戶頭像點擊后的操作列表等。用 css 選擇器實現交互效果，其實不需要寫一行 JavaScript，也能讓菜單在鼠標懸停或點擊時顯示出來。
使用 :hover 實現懸停下拉菜單
這是最簡單也是最常見的做法，適合用于鼠標操作為主的網站，比如 PC 端網頁。
.menu-item:hover .dropdown { display: block; }
上面這段代碼的意思是：當鼠標懸停在 .menu-item 上時，它的子元素 .dropdown 顯示出來。通常我們會把 .dropdown 默認設為 display: none;，這樣只有在懸停的時候才會出現。
立即學習“前端免費學習筆記（深入）”；
建議：
- 這種方式不適用于移動端，因為沒有“hover”的概念。
- 可以配合過渡動畫（transition）讓菜單出現得更自然。
- 注意布局層級（z-index），確保下拉菜單不會被其他內容遮擋。
使用 :focus-within 實現鍵盤友好型下拉菜單
如果你希望菜單對鍵盤用戶也友好，比如通過 Tab 鍵切換焦點來打開菜單，可以使用 :focus-within。
.menu-item:focus-within .dropdown { display: block; }
這意味著只要 .menu-item 內部任意一個元素獲得了焦點（例如點擊或 Tab 切換進去），.dropdown 就會顯示出來。
說明：
- 需要給可聚焦的子元素加上 tabindex 屬性。
- 更加符合無障礙標準，適合注重可用性的項目。
- 在移動端依然可能需要額外處理，因為觸摸行為不會觸發 focus。
使用復選框 + :checked 實現點擊切換菜單
如果想完全用 CSS 控制點擊展開/收起的效果，可以用隱藏的復選框和 :checked 偽類。
html 結構大致如下：
<input type="checkbox" id="menu-toggle" hidden> <label for="menu-toggle">菜單按鈕</label> <div class="dropdown" id="menu-content"> <!-- 菜單內容 --> </div>
CSS 中就可以這樣控制：
#menu-toggle:checked ~ #menu-content { display: block; }
優點：
- 純 CSS 實現點擊交互，無需 JS。
- 支持展開/收起切換狀態。
注意：
- label 和 checkbox 的搭配要準確，否則無法點擊觸發。
- 樣式可能需要自定義，原生 checkbox 很難看。
- 移動端兼容性還可以，但復雜場景可能還是得靠 JS。
總結一下
這幾種方法各有適用場景：
- 想快速做懸停菜單？用 :hover 最方便；
- 注重鍵盤訪問？試試 :focus-within；
- 希望點擊也能控制顯示？用 checkbox + :checked 是個不錯方案。
當然，這些方式都有局限，比如不能監聽外部點擊關閉菜單、無法動態加載數據等等。如果功能復雜了，最終還是要回到 JavaScript 來控制。
基本上就這些，不復雜但容易忽略細節，比如 z-index、隱藏 checkbox 的樣式處理、移動端兼容等，開發時多留意就能避免翻車。
