CSS 實現純 CSS 下拉菜單：hover 觸發彈出層無需 JavaScript

核心原理

利用 **`:hover` 偽類 + 絕對定位 + `display: none/block`** 實現鼠標懸停顯示子菜單，零 JS 依賴。

最小可行代碼

<!doctype html>
<style>
.trigger { position: relative; display: inline-block; }
.trigger .popup {
    position: absolute; left: 0; top: 100%; /* 緊貼觸發器底部 */
    background: #fff; border: 1px solid #000; padding: 8px;
    white-space: nowrap; display: none; /* 默認隱藏 */
    z-index: 100; box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.trigger:hover .popup { display: block; } /* 關鍵：hover 顯示 */
</style>

<div class="trigger">
    <a href="#">鼠標移動到這裡彈出層</a>
    <div class="popup">
        彈出層的內容<br/>
        彈出層的內容<br/>
        彈出層的內容
    </div>
</div>

進階增強（生產級）

現代原生替代：`

` + `

`

<details class="dropdown">
  <summary>點擊/hover 展開</summary>
  <div class="dropdown-content">內容...</div>
</details>

<style>
details.dropdown { position: relative; }
details.dropdown > summary { cursor: pointer; list-style: none; }
details.dropdown > summary::-webkit-details-marker { display: none; }
details.dropdown[open] .dropdown-content { display: block; }
.dropdown-content { position: absolute; top: 100%; left: 0; background: white; border: 1px solid #ccc; padding: 8px; }
</style>

**優點**：原生支援鍵盤、螢幕閱讀器、移動端觸摸、無 JS 依賴。
**缺點**：動畫定制受限、舊瀏覽器（IE）不支援。

選型建議

• 簡單桌面端懸停菜單 → 純 CSS `:hover` 最輕量。
• 需無障礙、移動端、動畫 → `
  ` + 少量 CSS/JS。
• 複雜多級、動態數據、權限控制 → 成熟 UI 庫 或 自寫 JS 組件。