Hamburger Menu功能失效且nav-lists溢出问题求助

问题1：汉堡菜单点击后nav-lists无法切换translate属性 #

核心原因 #

你使用的CSS选择器 .hamburger-menu:has(input:checked) + .nav-lists 是相邻兄弟选择器，要求.nav-lists必须是.hamburger-menu的直接下一个兄弟元素。但你的JSX结构中，.hamburger-menu后面紧跟的是.logo而非.nav-lists，导致选择器无法匹配目标元素，切换逻辑完全失效。

修复方案 #

方案1：修改CSS选择器（无需调整JSX结构）

将相邻兄弟选择器+替换为通用兄弟选择器~，它可以匹配目标元素之后所有的兄弟元素，不受中间元素影响：

.hamburger-menu:has(input:checked) ~ .nav-lists {
  translate: 0;
}

方案2：调整JSX元素顺序

如果偏好保持相邻选择器，可将.nav-lists移到.hamburger-menu的直接后方，同时给.logo添加margin-left: auto维持原有布局：

// App.js 修改后
function App() {
  return (
    <div className='navbar'>
      <label className="hamburger-menu">
          <input type="checkbox" />
      </label>
      <div className="nav-lists">
          <ul>
              <li>home</li>
              <li>products</li>
              <li>contact</li>
              <li>about</li>
          </ul>
          <div>
            <button>login</button>
            <button>cart</button>
          </div>
      </div>
      <div className="logo">Purohit Store</div>
    </div>
  );
}

.navbar .logo {
  margin-left: auto;
}

问题2：nav-lists溢出问题 #

核心原因 #

虽然给body设置了overflow-x:hidden，但.navbar是position: sticky定位，其定位上下文为视口，而.nav-lists是绝对定位在.navbar内部。由于.navbar未设置overflow-x:hidden，溢出内容会突破.navbar边界，不受body的溢出限制。

修复方案 #

1. 给.navbar添加overflow-x:hidden，限制内部元素的水平溢出：

.navbar{
  position: sticky;
  top: 0;
  left: 0;
  justify-content: space-between;
  padding: 10px 20px;
  background-color: #fff;
  width: 100%;
  z-index: 100;
  overflow-x: hidden; /* 新增 */
}

2. （可选）修正垂直方向溢出：.nav-lists的min-height:100vh加上margin-top:3rem会导致整体页面垂直溢出，可改为calc(100vh - 3rem)避免滚动：

@media screen and (max-width: 700px) {
  .nav-lists{
    min-height: calc(100vh - 3rem); /* 修改 */
  }
}

完整修复代码 #

App.js #

import './App.css';

function App() {
  return (
    <div className='navbar'>
      <label className="hamburger-menu">
          <input type="checkbox" />
      </label>
      <div className="logo">Purohit Store</div>
      <div className="nav-lists">
          <ul>
              <li>home</li>
              <li>products</li>
              <li>contact</li>
              <li>about</li>
          </ul>
          <div>
            <button>login</button>
            <button>cart</button>
          </div>
      </div>
    </div>
  );
}

export default App;

App.css #

*, *::before, *::after{
  box-sizing: border-box;
}

body{
  margin: 0;
  background: #eee;
  font-family: sans-serif;
  width: 100%;
  overflow-x: hidden;
}

.navbar,
.nav-lists,
.navbar ul,
.nav-lists div{
  display: flex;
  align-items: center;
}

.navbar{
  position: sticky;
  top: 0;
  left: 0;
  justify-content: space-between;
  padding: 10px 20px;
  background-color: #fff;
  width: 100%;
  z-index: 100;
  overflow-x: hidden;
}

.nav-lists{
  gap: 50px;
}
.navbar ul,
.nav-lists div{
  gap: 20px;
  list-style: none;
}


@media screen and (min-width: 701px) {
.hamburger-menu{
  display: none;
}
}

@media screen and (max-width: 700px) {

.nav-lists{
  position: absolute;
  top: 0;
  right: 0;
  flex-direction: column;
  background-color: #333;
  color: white;
  margin-top: 3rem;
  padding: 2rem;
  transition: translate 200ms ease;
  translate: 100%;
  max-width: 30rem;
  min-height: calc(100vh - 3rem);
}

.nav-lists ul,
.nav-lists div{
  flex-direction: column;
  padding: 0;
}

.hamburger-menu {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 110;
}

.hamburger-menu:has(input:checked) ~ .nav-lists {
  translate: 0;
}

}

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