CSS/HTML鼠标悬停下拉菜单无响应问题求助

1. HTML结构不符合嵌套规则 #

你的dropmenu列表直接作为navitems的同级子元素，没有嵌套在触发它的drophover标签内部。HTML规范中，<ul>的直接子元素必须是<li>，下拉菜单必须放在触发它的<li>内部，否则浏览器会将其解析为独立的同级元素，导致CSS无法关联hover状态。

修复后的HTML代码：

<header>
  <nav>
    <h1 class="logo">Morroco.</h1>
    <ul class="navitems">
      <li class="drophover">
        Découvrir le Maroc
        <!-- 将下拉菜单嵌套在 drohover 的 li 内部 -->
        <ul class="dropmenu">
          <li>Histoire &amp; Géographie</li>
          <li>Art &amp; Culture</li>
          <li>Téchnologie</li>
        </ul>
      </li>
      <li>Destinations</li>
      <li>Infos Pratique</li>
      <li>Nous Contacter</li>
    </ul>
    <i><img src="/img/menu_FILL0_wght400_GRAD0_opsz48.svg" alt="" /></i>
  </nav>
</header>

2. CSS选择器语法错误 #

你使用的.drophover:hover.dropmenu是交集选择器，它表示同时拥有drophover和dropmenu类的元素在hover状态下的样式，而我们需要的是当drophover元素被hover时，它的后代dropmenu元素显示，因此必须使用后代选择器（添加空格分隔）。

修复后的CSS代码：

/* 替换原有的hover规则 */
.drophover:hover .dropmenu {
  opacity: 1;
}

补充说明：如果需要使用display: none/block实现显示隐藏，由于display属性不支持过渡动画，会丢失平滑效果；若要保留过渡，使用opacity或visibility是正确选择。

内容的提问来源于stack exchange，提问作者sofiane-benali