如何在移动端汉堡导航菜单中嵌套子菜单？

你的核心问题是子菜单脱离文档流覆盖其他菜单，同时存在HTML结构不规范、CSS定位及溢出属性设置错误的问题，以下是具体修复步骤：

一、修正HTML结构（解决嵌套不规范问题） #

span标签不能直接嵌套li，将dropdown和mobile-menu的span改为div，同时调整子菜单的嵌套层级，确保Products的li包含子菜单容器：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">

<header>
  <div class="main-navigation-bar">
    <div class="section-1">
      <div class="logo-box">
        <h1>Logo</h1>
      </div>
    </div>
    <input type="checkbox" id="check">
    <div class="section-2">
      <nav>
        <ul class="main-nav">
          <div class="mobile-menu">
            <li class="dropdown">
              Products
              <span class="sub-arrow">
                <i class="fas fa-chevron-down"></i>
              </span>
              <div class="dropdown-content">
                <ul class="sub-menu">
                  <li class="item1 ">
                    <a href="#">
                      <span class="product">1A</span>
                      <p class="tagline">Lorem ipsum solor sal</p>
                    </a>
                    <ul class="g4-sub-tabs">
                      <li>•<span class="li-sub-tab">Link</span></li>
                      <li>•<span class="li-sub-tab">Link</span></li>
                      <li>•<span class="li-sub-tab">Link</span></li>
                    </ul>
                  </li>
                  <li class="item2">
                    <span class="product">1B</span>
                    <p class="tagline">lorem ipsum dolor sal</p>
                  </li>
                </ul>
              </div>
            </li>
            <li>Resources</li>
            <li>Company</li>
            <li>Careers</li>
            <li>Contact Us</li>
            <label for="check" class="close-menu"><i class="fas fa-times"></i></label>
          </div>
          <label for="check" class="open-menu"><i class="fas fa-bars"></i></label>
        </ul>
      </nav>
    </div>
  </div>
</header>

二、调整CSS样式（解决子菜单覆盖及嵌入问题） #

1. 移除主菜单的溢出隐藏，确保子菜单能正常显示
2. 修改移动端子菜单的定位方式，使其嵌入文档流
3. 添加移动端子菜单的展开/收起交互（通过点击Products触发）
4. 修复汉堡菜单的布局，确保内容可滚动

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');

* {
  font-family: 'Roboto', sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.main-navigation-bar {
  height: 94px;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  padding: 0 20px;
  position: relative;
}

.section-1 {
  width: 30%;
  display: flex;
  align-items: center;
}

.logo-box {
  width: 208px;
  height: 48px;
}

.section-2 {
  width: 70%;
  justify-content: flex-end;
  margin-left: auto;
  display: flex;
}

.main-nav {
  list-style-type: none;
  display: flex;
  align-items: center;
}

.main-nav li{
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 24px;
  letter-spacing: .75px;
  color: #1e1e1e;
  position: relative;
  cursor: pointer;
}

.main-nav li:hover {
  color: #1e1e1e75;
  transition: .4s;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
  max-width: 1000px;
  margin-top: 10px;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.sub-menu {
  list-style-type:none;
  display: flex;
  box-shadow: 0px 0px 2px 0px rgb(30 30 30 / 25%);
  border-radius: 8px;
  background-color: #fff;
}

.sub-menu li {
  padding: 24px 32px;
  width: 50%;
  float: none;
}

.item1 {
  border-right: 1px solid #f2f2f2;
}

.product {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: #1e1e1e;
}

.tagline {
  display: block;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: .44px;
  text-transform: none;
  color: #1e1e1e;
  margin-top: 8px;
}

.g4-sub-tabs {
  list-style: none;
  text-align: left;
  margin-top: 16px;
}

.g4-sub-tabs li {
  padding: 4px 0 !important;
  font-size: 14px;
  font-weight: 400;
  text-transform: none;
}

.li-sub-tab {
  padding-left: 8px;
}

#check, .open-menu, .close-menu {
  display: none;
}

@media only screen and (max-width: 959px) {
  .open-menu, .close-menu {
    position: absolute;
    color: #1e1e1e;
    cursor: pointer;
    font-size: 1.5rem;
    z-index: 101;
  }
  
  .open-menu {
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: block;
  }
  
  .close-menu {
    top: 20px;
    right: 20px;
  }
  
  #check:checked ~ .section-2 .mobile-menu {
    display: flex;
  }
  
  .main-navigation-bar {
    height: auto;
    min-height: 94px;
    display: block;
    padding: 0;
  }
  
  .section-1 {
    width: 100%;
    padding: 20px;
  }
  
  .section-2 {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fff;
    height: 100vh;
    display: none;
  }
  
  #check:checked ~ .section-2 {
    display: block;
  }
  
  .mobile-menu {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 80px 20px 20px;
    height: 100%;
    overflow-y: auto;
  }
  
  .mobile-menu li {
    width: 100%;
    padding: 16px 0;
    border-bottom: 1px solid #f2f2f2;
    float: none;
    position: relative;
  }
  
  /* 移动端子菜单改为相对定位，嵌入文档流 */
  .dropdown-content {
    display: none;
    position: static;
    transform: none;
    max-width: 100%;
    margin-top: 16px;
    box-shadow: none;
    border-radius: 0;
  }
  
  /* 移动端点击展开子菜单 */
  .dropdown.active .dropdown-content {
    display: block;
  }
  
  .sub-menu {
    display: block;
    box-shadow: none;
    border-radius: 0;
    width: 100%;
  }
  
  .sub-menu li {
    padding: 12px 0 12px 20px;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #f2f2f2;
  }
  
  .sub-arrow {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s;
  }
  
  .dropdown.active .sub-arrow {
    transform: translateY(-50%) rotate(180deg);
  }
}

三、添加简单JS实现移动端点击展开（可选） #

如果需要点击Products展开/收起子菜单，添加以下JS代码：

document.querySelector('.dropdown').addEventListener('click', function() {
  this.classList.toggle('active');
});

关键修改点说明 #

1. HTML结构修正：将span嵌套li改为div嵌套，确保语义化和布局正常
2. 移动端子菜单定位：把position:absolute改为static，让子菜单留在文档流中，不再覆盖其他菜单
3. 溢出属性调整：移除main-nav的overflow:hidden，并给移动端菜单添加overflow-y:auto确保内容可滚动
4. 交互逻辑优化：添加.active类控制子菜单的显示/隐藏，配合CSS实现点击展开效果
5. 布局细节调整：修复汉堡菜单的全屏覆盖，调整移动端菜单的内边距和边框，让层级更清晰

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