语义正确的导航结构必须用首页，其中定义链接组、包裹、href不可为空、当前页加aria-current="page"，且样式应作用于而非。
用 <nav><ul><li>@#@#@#@#@#@#@#@#@#@0</li></ul></nav>
<a></a> 放在 <li> 外面，也不要漏掉 <li> ——语义链断了就不是菜单了
display: flex 是最稳的水平排列方式
别再用 float: left 或 display: inline-block，前者要清浮动、后者有看不见的空白间隙，调试起来容易卡住。直接给 <ul></ul> 设 display: flex，一行写完就能对齐，还自带垂直居中能力。
-
justify-content: center居中，justify-content: flex-end右对齐，按需选 - 每个
<li>不用设宽，靠margin控制间距，比如margin: 0 1rem - 如果菜单项文字过长导致换行，加
white-space: nowrap到<a></a>上 - 注意：
<ul></ul>默认有padding-left，必须重置为0
:hover 效果必须作用在 <a></a> 上，不是 <li>
鼠标移到链接文字边缘但仍在 <li> 范围内时，如果 :hover 绑在 <li> 上，会误触发背景色变化——用户会觉得“明明没碰到字却变色了”。这问题在触控设备上更明显。
- 样式只写
a:hover { background: #eee; color: #333; }，别写li:hover a -
<a></a>要设display: block或inline-flex，让它撑满<li>，点击区域才够大 - 过渡动画加在
<a></a>上：transition: background 0.2s, color 0.2s，别加在<li>
移动端下拉菜单不用 JS 就能做，但有硬限制
纯 CSS 实现二级菜单确实可行，但依赖 <input type="checkbox"> + :checked ~ ul，这个方案在 iOS Safari 15.4 以下版本里有 focus 失效问题，而且要求 HTML 结构严格相邻。
-
<input id="nav-toggle" type="checkbox">必须放在最前，<label for="nav-toggle"></label>紧跟其后，<ul class="submenu"></ul>必须紧接在<input>后面，中间不能插任何块级元素 - 展开逻辑只能靠
input:checked ~ ul，不能用:focus-within——收起后焦点残留会导致菜单不关闭 - 如果项目要兼容老 iOS 或需要键盘操作（比如按空格展开），就得 fallback 到 JS，CSS-only 方案只是简化版备选
<a></a> 的交互完整性——结构对了，样式调得再炫，缺了 aria-label 或 href，对部分用户来说就是不可用的。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
