合理语义化的nav垂直菜单结构应为：外层用包裹单个，每个菜单项用包含（含href），子菜单通过嵌套实现，禁用div/p冒充；同时需支持键盘导航与屏幕阅读器识别。
nav垂直菜单的HTML结构怎么写才合理
语义化是前提，<nav></nav> 里必须用 <ul><li><a></a></li></ul> 套路，不能直接塞一堆 <div> 或 <code><p></p>。浏览器和读屏工具靠这个识别导航意图。
-
<nav></nav>是容器，只放一个逻辑导航区块（别多个 nav 堆一起） - 每个菜单项必须是
<li>，里面包<a></a>（即使当前页也要保留 href，可用#或实际路径，别用<span></span>冒充链接） - 如果有子菜单，用嵌套
<ul></ul>，但层级建议不超过两级，否则 hover 展开容易误触
错误示例：<nav><div class="item">首页</div></nav> —— 丢失语义、无法键盘聚焦、SEO 友好度归零。
纯CSS实现hover高亮和下划线动画的关键点
hover 效果不一定要 JS，但得避开几个常见断点：
-
a:hover默认只有文字变色，要加下划线得显式写text-decoration: underline，且注意它默认从文字中间穿过；想从底部滑入得用border-bottom或伪元素 - 动画必须加在
a上，不是li；否则鼠标移入 li 区域但没碰到 a 时会触发异常 - 垂直菜单项之间要有足够间距，否则 hover 区域重叠，快速移动时会闪烁
推荐做法（带底边动画）：
a {
display: block;
padding: 12px 20px;
position: relative;
text-decoration: none;
color: #333;
}
a:hover {
color: #007bff;
}
a:hover::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: #007bff;
transition: width 0.2s ease;
}
a:hover::after {
width: 100%;
}
子菜单hover展开时为什么经常闪退
这是垂直菜单最典型的交互 bug，本质是 <li> 和子 <ul></ul> 之间有间隙，鼠标移出 a 去点子菜单时经过空白区，导致 :hover 状态中断。
- 最稳解法：把子
<ul></ul>的margin-top改成负值，比如margin-top: -1px，让父子元素视觉无缝衔接 - 或者给父
<li>加position: relative，子<ul></ul>用top: 100%定位，彻底消除物理间隙 - 别依赖
transition-delay来“缓冲”，延迟掩盖不了结构缺陷，反而在低配设备上更卡
另外注意：子菜单默认 display: none，hover 触发时切到 block，但得确保父 <li> 的 hover 范围包含子菜单区域，否则一移过去就收了。
移动端适配时hover失效怎么办
手机和平板没有 hover 概念，:hover 在 iOS Safari 和 Android Chrome 上仅对可点击元素（如 <a></a>）有短暂响应，且不支持子菜单展开。
- 别在移动端强行保留 hover 下拉，改用点击展开（需要少量 JS 监听
click切换aria-expanded和 class） - 至少加
@media (hover: none)媒体查询，把 hover 样式关掉，避免误导 - 更关键的是：用
aria-haspopup="true"和aria-expanded="false"标注可展开项，配合 JS 控制状态，否则屏幕阅读器完全不知道有子菜单
hover 是桌面专属交互习惯，硬搬进触屏界面只会让手指用户反复点错。真要兼顾，优先保证点击可用，hover 只作为桌面增强。
