CSS汉堡菜单在大屏（>525px）下无法正确转换的技术求助

我折腾出了一个纯CSS实现的响应式汉堡菜单，刚好匹配需求，具体实现如下：

核心需求 #

• 当屏幕宽度≤525px时，显示汉堡图标样式的折叠菜单，点击图标可展开/收起导航链接
• 当屏幕宽度超过525px后，自动切换为常规导航布局：Logo左浮动，4个导航链接右浮动

基础HTML结构 #

<div class="nav">
  <h1>Zero Gravity</h1>
  <label for="toggle">&#9776</label>
  <input type="checkbox" id="toggle"/>
  <div class="menu">
    <a href="#home">首页</a>
    <a href="#services">服务</a>
    <a href="#about">关于</a>
    <a href="#contact">联系</a>
  </div>
</div>

核心CSS实现要点 #

我借助媒体查询和CSS选择器完成响应式切换与交互逻辑：

1. 大屏幕布局（>525px）：
   • 隐藏汉堡图标和复选框
   • 设置Logo左浮动，导航菜单容器右浮动，链接横向排列并添加hover效果
2. 小屏幕布局（≤525px）：
   • 显示汉堡图标，默认隐藏导航菜单
   • 利用复选框的checked状态，通过相邻兄弟选择器控制菜单的展开/收起
   • 导航链接改为纵向排列，添加hover时的背景色偏移效果

关键CSS代码片段：

/* 基础导航容器样式 */
.nav {
  background-color: #2c3e50;
  padding: 1.2rem;
  overflow: hidden;
}

.nav h1 {
  color: #ecf0f1;
  margin: 0;
  font-size: 1.5rem;
}

/* 大屏幕下的常规菜单样式 */
@media screen and (min-width: 526px) {
  label[for="toggle"], #toggle {
    display: none;
  }

  .menu {
    float: right;
  }

  .menu a {
    color: #ecf0f1;
    text-decoration: none;
    margin-left: 1.5rem;
    line-height: 1.5rem;
    transition: color 0.3s;
  }

  .menu a:hover {
    color: #3498db;
  }
}

/* 小屏幕下的汉堡菜单样式 */
@media screen and (max-width: 525px) {
  label[for="toggle"] {
    color: #ecf0f1;
    font-size: 1.8rem;
    float: right;
    cursor: pointer;
  }

  #toggle {
    display: none;
  }

  .menu {
    display: none;
    clear: both;
    background-color: #34495e;
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 4px;
  }

  /* 复选框选中时展开菜单 */
  #toggle:checked + .menu {
    display: block;
  }

  .menu a {
    display: block;
    color: #ecf0f1;
    text-decoration: none;
    padding: 0.6rem 0;
    transition: background-color 0.3s;
  }

  .menu a:hover {
    background-color: #2c3e50;
    padding-left: 0.5rem;
  }
}

这样就完成了纯CSS驱动的响应式汉堡菜单，不需要额外JS，兼容性也能覆盖大部分主流浏览器~

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