移动端导航栏子菜单嵌入及汉堡菜单遮挡问题求助

1. 实现小屏子菜单嵌入Numbers下方、Data上方 #

调整HTML结构

将one/two/three子菜单嵌套到Numbers菜单项的容器内，确保小屏展开时的层级关系：

<nav class="navbar">
  <button class="hamburger" id="hamburger">☰</button>
  <ul class="main-menu">
    <li><a href="#">Home</a></li>
    <li class="numbers-container">
      <a href="#">Numbers</a>
      <!-- 子菜单嵌套此处 -->
      <ul class="sub-menu">
        <li><a href="#">one</a></li>
        <li><a href="#">two</a></li>
        <li><a href="#">three</a></li>
      </ul>
    </li>
    <li><a href="#">Data</a></li>
    <li><a href="#">About</a></li>
  </ul>
</nav>

小屏样式控制（CSS媒体查询）

在小屏断点（如max-width:768px）下，设置子菜单默认隐藏，点击/聚焦Numbers时展开，同时保证它位于Numbers下方、Data上方：

/* 默认隐藏子菜单 */
.sub-menu {
  display: none;
  list-style: none;
  padding-left: 0;
}

/* 小屏设备适配 */
@media (max-width: 768px) {
  .main-menu {
    flex-direction: column;
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100vh;
    background-color: #fff;
    padding-top: 60px;
    transition: left 0.3s ease;
  }

  .main-menu.active {
    left: 0;
  }

  /* 让Numbers容器作为子菜单的定位参考 */
  .numbers-container {
    position: relative;
  }

  /* 触发子菜单显示的条件 */
  .numbers-container:focus-within .sub-menu,
  .numbers-container:hover .sub-menu {
    display: block;
    position: static; /* 跟随Numbers下方自然排列，自动处于Data上方 */
    padding-left: 1.2rem;
    background-color: #f8f8f8;
  }
}

2. 修复汉堡菜单被遮挡问题 #

遮挡问题本质是层级(z-index)不足，给汉堡按钮设置更高的层级，并固定其位置：

.hamburger {
  position: fixed;
  top: 1rem;
  right: 1rem;
  font-size: 1.5rem;
  border: none;
  background: transparent;
  cursor: pointer;
  /* 设置足够高的层级，确保在导航栏之上 */
  z-index: 1000;
}

/* 导航栏层级低于汉堡按钮，避免覆盖 */
.main-menu {
  z-index: 999;
}

补充汉堡菜单切换逻辑（JS） #

实现点击汉堡图标切换菜单展开/收起，并替换图标：

const hamburgerBtn = document.getElementById('hamburger');
const mainMenu = document.querySelector('.main-menu');

hamburgerBtn.addEventListener('click', () => {
  mainMenu.classList.toggle('active');
  // 切换汉堡/叉号图标
  hamburgerBtn.textContent = mainMenu.classList.contains('active') ? '×' : '☰';
});

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