solar-states.com小型桌面端下拉菜单遮挡主导航问题咨询

以下是可直接落地的修复方案：

• CSS 自动适配弹出位置
  优先使用现代浏览器原生支持的 popover API 实现下拉菜单，该API会自动检测视口边界，调整弹出方向避免溢出。如果需要兼容旧版本浏览器，可给下拉容器加 overflow-anchor: auto 属性，同时针对小型桌面断点（通常1024px~1280px区间）预设双方向展开规则，通过CSS类切换向上/向下展开逻辑。
• JS 动态计算展开方向
  hover触发菜单展开前，先计算触发元素和菜单的相对视口位置，判断下方空间是否足够展示完整菜单，自动切换展开方向，参考代码如下：

  const navTriggers = document.querySelectorAll('.main-nav .dropdown-trigger')
  navTriggers.forEach(trigger => {
    trigger.addEventListener('mouseenter', () => {
      const dropdownMenu = trigger.querySelector('.dropdown-menu')
      const triggerPos = trigger.getBoundingClientRect()
      const menuHeight = dropdownMenu.scrollHeight
      // 视口下方剩余空间小于菜单高度时向上展开
      if (window.innerHeight - triggerPos.bottom < menuHeight) {
        dropdownMenu.classList.add('expand-up')
      } else {
        dropdownMenu.classList.remove('expand-up')
      }
    })
  })
  

  配套CSS规则：

  .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 9999;
  }
  .dropdown-menu.expand-up {
    top: auto;
    bottom: 100%;
  }
  

• 限制菜单最大高度适配小屏幕
  针对小型桌面端断点，给下拉菜单设置 max-height: 55vh 和 overflow-y: auto，就算菜单向上溢出也只会展示部分，可通过滚动查看所有选项，不会完全无法操作。
• 交互逻辑调整
  可在小型桌面端将hover触发逻辑改为点击触发，避免误触的同时，点击后可自动调整页面滚动位置，保证菜单完整展示在视口内。

问题参考图 #

• 主菜单未展开状态：
  
• 大尺寸桌面端正常展开状态：
  
• 小尺寸桌面端异常展开状态：
  

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