本文详解因 html 结构错误导致的下拉菜单 hover 不生效问题，重点纠正嵌套关系与 class 书写规范，并提供可立即运行的 css/js 修复方案。
本文详解因 html 结构错误导致的下拉菜单 hover 不生效问题，重点纠正嵌套关系与 class 书写规范，并提供可立即运行的 css/js 修复方案。
在实现“悬停显示下拉菜单”功能时，开发者常误以为问题出在 CSS 或 JavaScript 逻辑上，而实际根源往往藏于 HTML 结构——尤其是父容器与下拉菜单之间的 DOM 层级关系是否正确。本文将系统性地指出并修复这一典型问题。
? 核心问题定位
原代码中存在两个关键 HTML 错误：
重复 class 属性：
<div class="support-section" class="nav-secondary__support-link">
❌ 错误：HTML 元素不能声明多个 class 属性，浏览器仅识别第一个，后者被忽略。
✅ 正确写法：<div class="support-section nav-secondary__support-link">下拉菜单脱离父级作用域：
原 <li id="navigation-region"> 标签提前闭合（</li> 出现在 <ul class="nav-secondary__dropdown-region"> 之前），导致下拉菜单 <ul> 成为兄弟节点而非子元素。
因此，CSS 中依赖 .nav-secondary__support-link-active .nav-secondary__dropdown-region 的后代选择器完全失效——因为该 <ul> 并非 #navigation-region 的后代。
✅ 修复后的 HTML 结构（关键片段）
<li id="navigation-region">
<a href="#" onclick="return false;">Region: USA/Intl
<span><img src="" alt="icon arrow" id="arrow"></span>
</a>
<!-- ⚠️ 注意：此处 ul 必须作为 li 的直接子元素 -->
<ul class="nav-secondary__dropdown nav-secondary__dropdown-region">
<li class="nav-secondary__dropdown-link nav-secondary__dropdown-title">
Select your preferred<span>country / region:</span>
</li>
<span class="nav-secondary__hr"></span>
<li class="link nav-secondary__dropdown-link-region">
<a href="..." lang="en-US">USA + International</a>
</li>
<li class="link nav-secondary__dropdown-link-region">
<a href="..." lang="en-CA">Canada</a>
</li>
<span class="nav-secondary__hr-end"></span>
<li class="nav-secondary__dropdown-link nav-secondary__dropdown-copy">
Experience local shipping options and optimized product inventory for your region.
</li>
</ul>
</li>? 提示：确保 <ul class="nav-secondary__dropdown-region"> 是 <li id="navigation-region"> 的直接子元素，而非同级或外层节点。这是 CSS 后代选择器生效的前提。
? 配套 CSS 优化建议
原 CSS 中使用了 visibility: hidden; opacity: 0; display: none; 三重隐藏，虽无错但冗余。推荐统一用 display: none 控制显隐（更利于性能与可访问性），并通过 transition 实现平滑动画：
.nav-secondary__dropdown-region {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
border: 1px solid #e0e0e0;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
z-index: 1000;
min-width: 240px;
padding: 12px 0;
}
.nav-secondary__support-link-active .nav-secondary__dropdown-region {
display: block;
animation: fadeIn 0.2s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-5px); }
to { opacity: 1; transform: translateY(0); }
}⚙️ JavaScript 补充说明
当前 JS 使用 onmouseover/onmouseout 可工作，但强烈建议改用 mouseenter/mouseleave ——前者会因子元素冒泡频繁触发，后者仅在真正进入/离开目标元素边界时触发，更符合下拉菜单交互直觉：
if (navigationRegion) {
// 点击切换（保留原有逻辑）
navigationRegion.addEventListener('click', function(e) {
const link = e.target.closest('a');
if (!link) return;
const parent = link.parentElement;
parent.classList.toggle('nav-secondary__support-link-active');
link.setAttribute('aria-expanded', parent.classList.contains('nav-secondary__support-link-active'));
});
// ✅ 推荐：用 mouseenter/mouseleave 替代 mouseover/mouseout
navigationRegion.addEventListener('mouseenter', function() {
this.classList.add('nav-secondary__support-link-active');
this.querySelector('a')?.setAttribute('aria-expanded', 'true');
});
navigationRegion.addEventListener('mouseleave', function() {
this.classList.remove('nav-secondary__support-link-active');
this.querySelector('a')?.setAttribute('aria-expanded', 'false');
});
}✅ 最终验证要点
- ✅ 检查 DevTools 中 #navigation-region 元素是否真实包裹下拉 <ul>；
- ✅ 查看 .nav-secondary__support-link-active 类是否成功添加到 <li id="navigation-region">；
- ✅ 在 Elements 面板中右键检查 <ul> 是否被 display: block 覆盖（而非仍为 none）；
- ✅ 使用 aria-expanded 属性辅助屏幕阅读器，提升无障碍体验。
通过修正 HTML 结构、精简 CSS 显隐逻辑、升级事件监听方式，即可彻底解决悬停菜单不显示问题——无需重写逻辑，只需回归语义化与层级本质。
