純 CSS 實現導航下拉菜單：hover 觸發顯示，無需 JavaScript

需求：HTML + CSS 實現導航欄下拉菜單，鼠標懸停顯示子菜單。

核心原理：:hover 偽類 + 絕對定位

<!doctype html>
<style>
/* 重置 */
ul.menu, ul.menu li { margin:0; padding:0; list-style:none; position:relative; }
ul.menu li { line-height:25px; float:left; margin-left:10px; }
ul.menu li a { display:block; padding:0 10px; text-decoration:none; color:#333; }
ul.menu div { 
    display:none; 
    position:absolute; 
    top:100%; left:0; 
    background:#fff; border:1px solid #ddd; 
    min-width:120px; box-shadow:0 2px 5px rgba(0,0,0,.1);
    z-index:100;
}
ul.menu div a { display:block; padding:8px 12px; white-space:nowrap; }
ul.menu div a:hover { background:#f5f5f5; }

/* 關鍵：懸停父 li 顯示子 div */
ul.menu li:hover > div { display:block; }
</style>

<ul class="menu">
  <li><a href="#">菜單一</a>
    <div>
      <a href="#">子項 1-1</a>
      <a href="#">子項 1-2</a>
    </div>
  </li>
  <li><a href="#">菜單二</a>
    <div>
      <a href="#">子項 2-1</a>
      <a href="#">子項 2-2</a>
    </div>
  </li>
  <li><a href="#">菜單三</a>
    <div>
      <a href="#">子項 3-1</a>
      <a href="#">子項 3-2</a>
    </div>
  </li>
</ul>

關鍵點解析

1. position:relative 於 li：建立子菜單 absolute 定位的參考基準。
2. top:100%：子菜單緊貼父項底部。
3. display:none 默認隱藏，li:hover > div { display:block } 懸停顯示。
4. z-index 確保覆蓋頁面其他內容。
5. **無 JavaScript**，純 CSS 實現，輕量、無障礙友好 (鍵盤 Tab 可聚焦 a 觸發)。

進階增強 (可選)

• 添加 transition: opacity .2s 實現淡入動畫 (需配合 opacity/visibility 而非 display)。
• 多級嵌套：子 li:hover > div 同理實現三級菜單。
• 移動端適配：@media (hover: none) 下改用 :focus-within 或 JS 切換 class。

IE6 不支持非 a 元素 :hover，但現代項目已無需兼容 IE6。此方案為現代瀏覽器標準純 CSS 下拉菜單實現。