垂直菜单最稳妥的结构是用包裹，每个菜单项用，链接用；必须避免堆砌或直塞，统一用aria-current="page"标识当前页，并通过display: block和text-decoration: none确保语义正确、点击热区完整、样式可控。
垂直菜单的 HTML 结构怎么写才不容易错
垂直菜单最稳妥的结构是用 <nav></nav> 包裹一个无序列表 <ul></ul>，每个菜单项用 <li>，链接用 @#@#@#@#@#@#@#@#@#@0 是推荐起点
::before 或内联 SVG，别额外加 <span></span> 增加嵌套深度aria-current="page" 属性，比只靠 class 更可靠纯 CSS 实现竖向排列的关键样式
垂直菜单本质是让 <li> 块级堆叠，不是靠 flex-direction: column 或 grid —— 那些在老浏览器里容易掉样式，且对简单场景属于过度设计。
核心就三行：
nav ul { list-style: none; padding: 0; margin: 0; }
nav li { display: block; }
nav a { display: block; padding: 12px 20px; text-decoration: none; }
这样写兼容性好，display: block 确保点击热区完整，text-decoration: none 必须显式清除下划线，否则默认样式会破坏整体感。
- 别用
float: left+clear: both模拟垂直——这是 2010 年的老办法，易塌陷、难居中 - 悬停背景色建议用
background-color而非border-left，后者在高缩放下有渲染毛刺 - 字体大小统一用
rem，避免父容器 font-size 变动时子项错位
鼠标悬停和选中状态的样式陷阱
很多人写 a:hover 后发现点击后样式消失，是因为没处理 a:active 和 a:focus，更关键的是漏了 a[aria-current="page"] 这个语义化选中态。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
正确顺序必须是：:link → :visited → :hover → :active → :focus → [aria-current]，否则低版本 Safari 会覆盖掉当前页样式。
-
a:hover和a:focus的背景色建议保持一致，键盘用户 Tab 导航时体验才连贯 - 不要给
a:focus加outline: none，除非同时提供等效的box-shadow替代方案 - 移动端需补
@media (hover: none) and (pointer: coarse)逻辑，避免 touch 设备误触发 hover
响应式折叠菜单要不要 JS？
纯 CSS 能做基础收起（用 details/summary），但真要支持多级展开、动画、键盘操作（如按空格展开）、焦点管理，JS 不可避免。
轻量方案推荐监听 click 切换 aria-expanded 和 hidden 属性，再配 CSS 控制显示。别用 display: none 硬切——它会让屏幕阅读器完全忽略内容。
- 折叠按钮必须用
<button></button>，不能用<div onclick>，否则无法键盘聚焦 <li>展开动画优先用 <code>max-height+overflow: hidden，比height更安全（高度不确定时不会撑破容器） - 移动端竖向菜单常被误认为“底部导航”，记得在
<nav></nav>上加role="navigation"显式声明
垂直菜单最难的不是排列，而是状态同步：URL 变化时菜单是否高亮、刷新后是否保持展开、键盘操作能否闭环。这些点一漏，PC 和移动用户都会卡住。
