用 结构实现语义化横向菜单，css 用 display: flex 布局，hover 作用于 a 元素；二级菜单可用 checkbox + :checked ~ ul 纯 css 控制；必加 aria-label 保障无障碍访问。
怎么用纯 HTML + CSS 做一个能点击、有 hover 效果的横向菜单栏
不需要 JavaScript 就能做出可用的导航菜单，核心是 <nav></nav> 包裹 <ul></ul> + <li> + <a></a> 结构，再用 CSS 控制布局和交互。
常见错误是直接写一堆 <div> 或用 <code><table> 模拟菜单——语义不清、屏幕阅读器不识别、移动端默认行为异常。
<ul>
<li>必须用 <code><nav></nav> 包裹整个菜单，这是语义化基础，对 SEO 和无障碍访问都关键
<ul></ul> 里每个菜单项用 <li>，别用 <div>；链接必须是 <code><a href="#"></a>，哪怕暂时没跳转也要写 href，否则键盘 Tab 无法聚焦
display: flex 最稳，比 float 或 inline-block 更易控制间距和垂直居中a 上，别加在 li 上——否则鼠标移到文字外但仍在 li 内时会误触发为什么 menu 标签不推荐直接用，而要用 nav + ul
<menu></menu> 是 HTML5 引入的标签，但浏览器支持弱、默认样式不可控、实际渲染行为不一致（Chrome 当作 <ul></ul>，Firefox 可能忽略），W3C 也明确说它“不鼓励用于导航”。
真实场景里，<nav></nav> 是唯一被所有主流浏览器和读屏软件一致识别的导航容器语义标签。
立即学习“前端免费学习笔记（深入）”；
-
<menu type="toolbar"></menu>已被废弃，现代框架/构建工具基本不处理它 - 如果你在 Vue/React 里动态生成菜单，依然建议输出
<nav><ul>...</ul></nav>，而不是套一层<menu></menu> - 某些 CMS 导出的 HTML 会自动塞
<menu></menu>，上线前最好手动替换掉
移动端下拉菜单怎么不用 JS 实现（CSS only）
用 checkbox + label + :checked + ~ 选择器可以纯 CSS 控制显隐，适合简单二级菜单。
原理是把 <input type="checkbox" id="menu-toggle"> 放在最前，用 <label for="menu-toggle"></label> 当按钮，菜单 <ul></ul> 用 input:checked ~ ul 控制显示。
- 必须给
input加id，label加对应for，否则点击无响应 - 菜单
<ul></ul>必须紧跟在input后面，且中间不能插入其他块级元素，否则~选择器失效 - 这个方案在 iOS Safari 15.4 以下有 focus 失效问题，如果需兼容老设备，得 fallback 到 JS
- 不要用
:focus-within替代——它在菜单收起后仍可能保持展开态，逻辑难控制
常见报错：点击菜单没反应 / Tab 键跳不过去 / 屏幕阅读器读不出菜单名
本质几乎都是语义缺失或可访问性属性遗漏。
典型错误信息：Navigation landmark not found（Lighthouse 报告）、VoiceOver 朗读成“列表，3 个项目”却不提“导航”二字。
- 漏了
<nav aria-label="主菜单"></nav>——aria-label是必加项，否则读屏器不知道这是导航 -
<a></a>里只有图标没文字？必须加aria-label或visually-hidden文字，否则读屏器静音 - 用了
pointer-events: none或tabindex="-1"却没配role="link"，导致键盘不可操作 - 菜单项
<a></a>的href是空字符串href=""，会被当成页面顶部跳转，应改为href="#"或具体路径
aria-label 和 <nav></nav> 不是“可选项”，是默认就该写上的东西。
