为导航栏添加下拉菜单 实现桌面悬停、移动端点击展开

直接基于你现有代码修改即可，不需要引入额外依赖，完全匹配你要的「桌面端hover展开、移动端点击展开」交互，下拉样式和主导航保持一致：

1. 替换/新增CSS样式 #

首先把你原有代码里的.navigation-bar-dropdown样式块替换成下面的内容，补全下拉默认隐藏、展开状态、两端适配的样式：

/* 下拉菜单默认隐藏 */
.navigation-bar-dropdown {
  display: none;
  flex-direction: column;
  width: 100%;
  margin-top: 1rem;
  gap: 0.5rem;
}

/* 下拉展开状态类 */
.navigation-bar-dropdown.open {
  display: flex;
}

/* 移动端带下拉的导航项改为纵向排列，避免下拉内容错位 */
.navigation-bar-menu li:has(.navigation-bar-dropdown) {
  flex-direction: column;
  align-items: center;
}

然后在你现有的@media only screen and (min-width: 700px)桌面端媒体查询块里，追加以下样式：

/* 桌面端带下拉的导航项设为相对定位，作为下拉的定位父级 */
.navigation-bar-menu li:has(.navigation-bar-dropdown) {
  position: relative;
  flex-direction: row;
}

/* 桌面端hover触发下拉显示 */
.navigation-bar-menu li:has(.navigation-bar-dropdown):hover .navigation-bar-dropdown {
  display: flex;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.5rem;
  background: #ecf0f1;
  border-radius: 0.25rem;
  padding: 0.5rem;
  min-width: 100%;
  z-index: 99;
}

/* 桌面端下拉项样式和主导航统一 */
.navigation-bar-dropdown li {
  width: 100%;
  text-align: center;
  padding: 0.75rem;
  border-radius: 0.25rem;
}

2. 替换JavaScript逻辑 #

把你原有的JS代码全部替换成下面的内容，补全移动端点击下拉、窗口大小变化重置状态的逻辑：

window.addEventListener('DOMContentLoaded', () => {
  const menuToggler = document.querySelector('.navigation-bar-toggle')
  const menu = document.querySelector('.navigation-bar-menu')
  const dropdownParents = document.querySelectorAll('.navigation-bar-menu li:has(.navigation-bar-dropdown)')

  // 原有汉堡菜单切换逻辑
  menuToggler.addEventListener('click', () => {
    menu.classList.toggle('open')
  })

  // 移动端下拉点击切换逻辑
  dropdownParents.forEach(parent => {
    const dropdown = parent.querySelector('.navigation-bar-dropdown')
    const triggerLink = parent.querySelector('a')

    triggerLink.addEventListener('click', (e) => {
      // 仅移动端（宽度小于700px）时触发下拉切换，阻止链接默认跳转
      if (window.innerWidth < 700) {
        e.preventDefault()
        // 展开当前下拉前，先关闭其他已展开的下拉
        dropdownParents.forEach(otherParent => {
          if (otherParent !== parent) {
            otherParent.querySelector('.navigation-bar-dropdown').classList.remove('open')
          }
        })
        dropdown.classList.toggle('open')
      }
    })
  })

  // 窗口尺寸变化时重置菜单状态，避免切屏后样式错乱
  window.addEventListener('resize', () => {
    dropdownParents.forEach(parent => {
      parent.querySelector('.navigation-bar-dropdown').classList.remove('open')
    })
    // 切到桌面端时自动关闭移动端展开的汉堡菜单
    if (window.innerWidth >= 700) {
      menu.classList.remove('open')
    }
  })
})

实现效果说明 #

• 桌面端：鼠标悬停在Services、Products导航项上自动弹出下拉，鼠标移开自动收起，下拉的背景、hover效果完全和主导航样式统一，不会挤压其他导航项位置
• 移动端：点击汉堡按钮展开主菜单后，点击带下拉的导航项即可展开对应子菜单，同时自动收起其他已展开的子菜单，点击普通导航链接正常跳转
• 横竖屏/窗口大小切换时自动重置菜单状态，不会出现错位、下拉残留的问题

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