纯css实现移动端响应式导航菜单的核心是input[type="checkbox"]作状态源并配合peer/peer-checked控制显隐，必须将checkbox置于nav前且同级相邻，因peer仅对前置相邻兄弟生效；用translate-x-full替代hidden实现丝滑动画且不触发重排；桌面端需lg:translate-x-0与lg:flex双重重置以避免缩放残留隐藏状态。
纯 CSS 实现移动端响应式导航菜单的显示与隐藏，核心是用 input[type="checkbox"] 作状态源，配合 peer 和 peer-checked 控制兄弟元素显隐——不是靠 JS 切类，也不是靠媒体查询硬切 display。
为什么必须把 checkbox 放在导航栏前面且紧挨着？
peer 选择器只对「同级、相邻、前置」的兄弟元素生效。如果 input#menu-toggle 被塞进 <nav></nav> 里，或放在 <nav></nav> 后面，peer-checked:translate-x-0 就完全不触发。
-
<input id="menu-toggle" type="checkbox" class="peer hidden">必须直接放在<nav></nav>标签之前，中间不能插任何其他元素 - 不能嵌套：比如
<header><input><nav></nav></header>是 OK 的；但<header><div><input></div> <nav></nav></header>就失效 -
peer类本身无样式，漏写就等于整个机制瘫痪
移动端用 translate-x-full 而不是 hidden 的原因
hidden 会触发重排，且无法做过渡动画；translate-x-full 把导航栏移出视口右边界，配合 transition-transform 实现丝滑滑入，同时不影响布局流，避免页面抖动。
-
<nav></nav>必须设固定宽度（如w-64）+absolute或fixed定位，否则translate-x-full的位移基准不可控 - 别用
left: 100%替代 —— 它依赖父容器宽度，而translate-x-full基于自身宽度，更可靠 - 加
max-h-screen overflow-y-auto，防止子菜单内容过长时溢出不可滚动
桌面端如何避免缩放后残留隐藏状态？
仅靠 peer-checked 不足以覆盖桌面端逻辑。小屏展开后若直接拉宽浏览器窗口，导航栏可能卡在滑出状态，因为 peer-checked 仍为 true。
- 必须叠加断点类：
peer-checked:translate-x-0 lg:translate-x-0，确保大屏下强制归位 - 同时用
lg:flex显式恢复 flex 布局，不能只依赖peer-checked:flex - 遮罩层要用
<label for="menu-toggle"></label>，而不是<button onclick="..."></button>，否则点击后 checkbox 状态不同步
hover 子菜单和点击主菜单共存时容易踩的坑
如果导航栏含二级菜单，且想在桌面端 hover 展开、移动端点击展开，peer-checked 和 :hover 会冲突——比如小屏点击展开后，鼠标移到某项上，:hover 可能意外收起整个导航栏。
- 二级菜单的
.sub-menu必须写成.menu-item:hover .sub-menu，而非.menu:hover .sub-menu，否则一 hover 全开 - 移除顶层
.menu { overflow: hidden }，改用每个.sub-menu { overflow: hidden max-height: 0 }+transition控制单个展开 - 移动端禁用
:hover效果：加@media (hover: none)规则屏蔽
真正难的不是写出能动的代码，而是理解 peer 的边界——它只认相邻兄弟，不认父子、不认任意兄弟、不认祖先。一旦 DOM 结构稍有偏移，整个逻辑就静默失效，连报错都没有。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
