汉堡菜单移动端子列表失效 导航hover适配问题求助

无需大幅调整现有代码整体结构，两个问题可按以下方式修复：

移动端汉堡菜单子列表无法触发打开问题 #

按优先级排查3个核心点，均为微调级改动：

• 校验点击事件绑定：确认汉堡按钮没有被上层透明元素遮挡，父级元素的e.stopPropagation()没有阻断点击事件冒泡，移动端视口下事件绑定的元素选择器没有匹配失效
• 校验样式优先级：确认子列表div的显隐类权重，高于桌面端给子列表设置的默认隐藏样式，避免点击切换类后样式被覆盖、视觉上无响应
• 校验层级关系：确认展开后的子列表z-index值高于导航栏、首屏banner等相邻元素，不会被遮挡导致看起来未触发

参考修复代码（在原有逻辑基础上追加即可，无需重构）：

const hamburger = document.querySelector('.hamburger-toggle')
const mobileMenu = document.querySelector('.mobile-nav-submenu')
hamburger.addEventListener('click', (e) => {
  e.preventDefault()
  mobileMenu.classList.toggle('is-open')
  hamburger.classList.toggle('active')
})

@media (max-width: 767px) {
  .mobile-nav-submenu {
    display: none;
    z-index: 999;
  }
  .mobile-nav-submenu.is-open {
    display: block;
  }
}

大屏端导航列表hover交互实现 #

完全基于现有DOM结构实现，无需新增节点，纯CSS即可完成：

• 利用CSS:hover伪类控制下拉子列表显隐，加轻量过渡优化体验
• 给下拉列表加顶部透明内边距扩大触发热区，避免鼠标从导航项移动到下拉列表过程中菜单意外收起

参考实现代码（直接追加到大屏媒体查询样式块中即可）：

@media (min-width: 1024px) {
  .nav-list-item {
    position: relative;
    cursor: pointer;
  }
  .nav-list-item .submenu {
    position: absolute;
    top: 100%;
    left: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: .2s ease all;
    padding-top: 16px;
  }
  .nav-list-item:hover .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

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