HTML5横向二级菜单需用nav包裹ul，一级li内嵌二级ul并设position:relative，CSS用display:inline-block使一级横向，二级ul用display:flex+flex-direction:row实现横向展开，移动端需JS或focus替代:hover。
HTML5 结构怎么写才支持横向二级菜单
纯 HTML5 不提供“菜单”语义化标签的交互能力，nav 和 ul/li 只负责结构——二级菜单能否横向展开，完全取决于 CSS 布局方式和 hover/focus 触发逻辑。别指望加个 role="menu" 就能自动横向排布。
常见错误是把二级 ul 写在一级 li 外面，导致 DOM 层级断裂，CSS 无法用 li:hover > ul 定位子菜单。必须确保二级 ul 是一级 li 的直接子元素。
- 一级导航用
nav包裹ul，每个菜单项是li，链接用a - 有子菜单的
li内部紧跟着一个ul（不要放在a里，也不要丢到nav外） - 给一级
li设position: relative，方便二级ul绝对定位
CSS 怎么让二级菜单横向铺开而不是竖着掉下来
默认 ul 是块级、垂直堆叠的，要横向，核心是让一级 li 变成行内布局，同时控制二级 ul 的显示位置和方向。关键不是“横向菜单”，而是“一级横向 + 二级横向展开”——后者容易被误解为二级也排成一行，实际多数需求是：一级横向排列，鼠标悬停后，二级以横向条状（非下拉列表）出现在下方或右侧。
- 一级
li用display: inline-block或display: flex实现横向排列 - 二级
ul默认display: none，父li:hover > ul设为display: block - 若要二级也横向铺开（比如顶部导航带横向子栏），给二级
ul加display: flex和flex-direction: row - 避免用
float，它会破坏父容器高度计算，且 hover 后容易错位
:hover 在移动端不生效怎么办
:hover 在 iOS 和 Android 大部分浏览器中仅对可点击元素（如 a）有延迟触发，且不支持“悬停即展开”，用户点一下才触发，再点一下才跳转——这会让二级菜单体验断层。这不是 bug，是规范行为。
立即学习“前端免费学习笔记（深入）”；
- 必须为一级
a添加touchstart事件监听，用 JS 切换class控制二级ul显隐 - 或者改用
focus+tabindex支持键盘导航，兼顾可访问性 - 别依赖
:hover做唯一触发方式，否则在 iPad 上点一次弹出、再点子项才跳转，用户会误以为卡了 - 如果只做 PC 端内部系统，可忽略，但上线前务必真机测试
为什么二级菜单经常遮不住下面内容或错位
本质是层叠上下文（stacking context）和定位基准没理清。二级 ul 绝对定位后，若父 li 没设 position: relative，它会相对于最近的定位祖先（可能是 body）定位，导致飘走；若 z-index 设得不够高，又被其他组件（比如 banner 轮播图）盖住。
- 一级
li必须设position: relative，这是二级ul定位的锚点 - 二级
ul设position: absolute; top: 100%; left: 0;，保证紧贴一级菜单下方 - 显式设置
z-index: 1000（数值比页面其他模块高即可，不用死磕 9999） - 检查父容器是否有
overflow: hidden，它会裁剪绝对定位的二级菜单
最常被忽略的是移动端点击穿透和焦点管理——菜单展开后，手指滑动可能误触下层按钮，需要临时加一层半透蒙版或用 pointer-events: none 控制层级响应。
