CSS 導航欄下拉菜單默認隱藏且懸停顯示的實現

問題

子菜單默認顯示，未隱藏。

修正 CSS

.menu2_div {
    display: none;          /* 默認隱藏 */
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid #ddd;
}
.menu2 li:hover > .menu2_div {
    display: block;         /* 懸停父 li 顯示 */
}

HTML 結構

<ul class="menu2">
  <li>菜單一
    <div class="menu2_div"><ul><li>子項1</li></ul></div>
  </li>
</ul>

增強

• 添加 `transition: opacity .2s` 做淡入動畫。
• JS 兜底：移動端 `touchstart` 切換 class。