为何Hover效果仅在Chromium内核浏览器生效，Firefox无响应？

核心问题 #

1. 选择器逻辑不符需求：当前CSS监听的是整个.podmenu容器的hover事件来显示下拉，但需求是悬停在class="n"的<li>元素上触发，逻辑不匹配。
2. CSS嵌套语法兼容性：部分旧版Firefox对CSS嵌套语法（.podmenu:hover { .verze { ... } }）支持不完善，需改用标准的选择器写法。
3. DOM结构关联问题：下拉菜单.verze位于class="n"的<li>的下一个兄弟<li>中，需要通过兄弟选择器关联hover事件。

修复后的CSS代码 #

.podmenu {
    display: flex;
    flex-direction: column;
    list-style: none;
    width: 10rem;
    margin-left: 3rem;
    margin-bottom: 60px;
}

.verze {
    list-style: none;
    flex-direction: column;
    display: none;
    margin-top: 1rem;
    transition: 2s;
    margin-left: -2.94rem;
}

/* 改用相邻兄弟选择器+后代选择器，兼容所有现代浏览器 */
.podmenu .n:hover + li .verze {
    display: flex;
}

额外优化说明 #

如果希望鼠标移到下拉菜单上时也保持显示（避免快速移开消失），可以调整DOM结构，把.verze放到class="n"的<li>内部，再修改选择器：

.podmenu .n:hover .verze {
    display: flex;
}

对应的HTML调整：

<ul class="podmenu">
  <li class="n">
    Verze
    <ul class="verze">
      <li class="wind"><a href="windows1.html">Windows 1.0</a></li>
      <li class="wind"><a href="windows2.html">Windows 2.0</a></li>
      <li class="wind"> <a href="windows3.html">Windows 3.0</a></li>
      <li class="wind"><a href="windows95.html">Windows 95</a></li>
      <li class="wind"><a href="windows98.html">Windows 98</a></li>
      <li class="wind"><a href="windowsn.html">Windows NT</a></li>
      <li class="wind"><a href="windows20.html">Windows 2000</a></li>
      <li class="wind"><a href="windowsx.html">Windows XP</a></li>
      <li class="wind"><a href="windowsv.html">Windows Vista</a></li>
      <li class="wind"> <a href="windows7.html">Windows 7 </a></li>
    </ul>
  </li>
</ul>

调整后，Chromium和Firefox均可正常触发悬停显示效果，且符合需求逻辑。

内容的提问来源于stack exchange，提问作者Jakub