必须用结构而非，因定义导航区域语义、明确并列菜单项，缺失会导致读屏器跳过、seo权重稀释、css选择器失效及键盘焦点错乱；纯html无法响应式，需配合@media断点和:checked伪类实现折叠。
直接用 <nav></nav> + <ul></ul> + Flex 布局，加一条 @media 切断点，就能跑通绝大多数场景。别碰 float，也别指望纯 CSS hover 下拉在手机上可用。
为什么必须用 <nav></nav> 包 <ul></ul> 而不是 <div class="nav">
<p>语义错误会导致屏幕阅读器跳过导航、SEO 权重稀释、样式调试时父子关系混乱。常见错误是把 <code><a></a> 直接塞进 <nav></nav> 里——这会让 CSS 选择器难写、间距难控、键盘焦点顺序错乱。
-
<nav></nav> 表示“一组导航链接的集合”，<ul></ul> 才是并列项的语义容器
- 如果只有单个链接（比如仅“登录”），
<nav></nav> 反而不合适，改用 <header></header> 或普通 <div>
<li>别给 <code><ul></ul> 设 margin 或 padding 后再靠 text-align 对齐——Flex 才是可控方案
display: flex 的关键配置和易错点
横向对齐靠 justify-content，不是靠 margin-left: auto 堆出来的；热区完整靠 a 设 display: block，不是靠 li 的 padding 撑开。
-
nav ul 必须设 display: flex; list-style: none; margin: 0; padding: 0;
-
nav a 必须设 display: block; text-decoration: none;，否则点击只响应文字区域
- 右侧对齐某几个项（如用户头像）：给对应
<li> 加 margin-left: auto;，不是给最后一个 <li> 加 margin-right
- 最后一项右侧多余间距？用
nav li:last-child { margin-right: 0; } 清掉
移动端折叠菜单的最小可行方案
不依赖 JS 是底线。用 <input type="checkbox"> + <label></label> + :checked ~ 通用兄弟选择器，结构必须严格：<input> 在 <nav></nav> 前面，for 和 id 严格一致。
- HTML 中放：
<input type="checkbox" id="menu-toggle"><label for="menu-toggle">☰</label><nav><ul>...</ul></nav>
- CSS 中写：
#menu-toggle:checked ~ nav ul { display: flex; flex-direction: column; }
- 必须加
position: absolute 或 top: 100% 让下拉层不撑开布局，否则页面会跳动
- 别信“
:focus-within 控制展开”的方案——iOS Safari 支持不稳定，且无法解决点击后收起问题
Safari 和 iOS 上 hover/focus 失效的真实原因
不是代码写错了，是 Safari 对未访问链接（:link）和已访问链接（:visited）有硬性限制：hover 时不能改 background-color、border、transform 等，除非你显式定义了基础状态。
- 必须写：
a:link, a:visited { color: #333; text-decoration: none; }
- hover 和 focus 要合并写：
a:hover, a:focus { background-color: #f0f0f0; }，否则键盘用户不可用
- 如果要用
transform: scale(1.05)，得加 will-change: transform;，不然 Safari 渲染卡顿
- 移动端没有 hover，所以所有交互反馈必须同时支持
:focus，不能只靠 hover
真正卡住人的往往不是“怎么写”，而是 <input> 和 <nav></nav> 的 DOM 顺序、:link/:visited 的基础样式缺失、以及忘记加 <meta name="viewport"> 导致媒体查询完全不生效。这些地方一错，整个导航就“看起来能跑，实际点不动”。
<nav></nav> 表示“一组导航链接的集合”，<ul></ul> 才是并列项的语义容器<nav></nav> 反而不合适，改用 <header></header> 或普通 <div>
<li>别给 <code><ul></ul> 设 margin 或 padding 后再靠 text-align 对齐——Flex 才是可控方案
display: flex 的关键配置和易错点
横向对齐靠 justify-content，不是靠 margin-left: auto 堆出来的；热区完整靠 a 设 display: block，不是靠 li 的 padding 撑开。
-
nav ul必须设display: flex; list-style: none; margin: 0; padding: 0; -
nav a必须设display: block; text-decoration: none;，否则点击只响应文字区域 - 右侧对齐某几个项（如用户头像）：给对应
<li>加margin-left: auto;，不是给最后一个<li>加margin-right - 最后一项右侧多余间距？用
nav li:last-child { margin-right: 0; }清掉
移动端折叠菜单的最小可行方案
不依赖 JS 是底线。用 <input type="checkbox"> + <label></label> + :checked ~ 通用兄弟选择器，结构必须严格：<input> 在 <nav></nav> 前面，for 和 id 严格一致。
- HTML 中放：
<input type="checkbox" id="menu-toggle"><label for="menu-toggle">☰</label><nav><ul>...</ul></nav> - CSS 中写：
#menu-toggle:checked ~ nav ul { display: flex; flex-direction: column; } - 必须加
position: absolute或top: 100%让下拉层不撑开布局，否则页面会跳动 - 别信“
:focus-within控制展开”的方案——iOS Safari 支持不稳定，且无法解决点击后收起问题
Safari 和 iOS 上 hover/focus 失效的真实原因
不是代码写错了，是 Safari 对未访问链接（:link）和已访问链接（:visited）有硬性限制：hover 时不能改 background-color、border、transform 等，除非你显式定义了基础状态。
- 必须写：
a:link, a:visited { color: #333; text-decoration: none; } - hover 和 focus 要合并写：
a:hover, a:focus { background-color: #f0f0f0; }，否则键盘用户不可用 - 如果要用
transform: scale(1.05)，得加will-change: transform;，不然 Safari 渲染卡顿 - 移动端没有 hover，所以所有交互反馈必须同时支持
:focus，不能只靠 hover
真正卡住人的往往不是“怎么写”，而是 <input> 和 <nav></nav> 的 DOM 顺序、:link/:visited 的基础样式缺失、以及忘记加 <meta name="viewport"> 导致媒体查询完全不生效。这些地方一错，整个导航就“看起来能跑，实际点不动”。
