垂直分类导航菜单需解决悬停穿透、键盘可访问、移动端折叠、焦点管理四问题：用top:100%或透明边框消除悬停间隙；键盘操作需js监听arrowdown并管理aria-expanded；移动端改用position:sticky+max-height；aria-current应动态匹配路径并加在a标签上。
垂直分类导航菜单不是加个 ul 套几层 li 就能用的——真正在项目里跑起来，得解决悬停穿透、键盘可访问、移动端折叠、焦点管理这四件事。下面按实际开发中卡住人的点来拆。
用 :hover 实现二级菜单时鼠标移入间隙会闪退
这是最常被忽略的 CSS 布局问题：一级菜单和二级菜单之间有像素级空隙，mouseleave 触发后二级菜单立刻消失，用户根本点不到子项。
- 必须用
top: 100%+margin-top: -1px或border-bottom: 1px solid transparent消除间隙 - 二级菜单容器设
opacity: 0; visibility: hidden;，再用transition: opacity 0.2s, visibility 0.2s，避免用display: none导致无法过渡 - 一级菜单项加
position: relative，确保二级菜单相对它定位，否则在 flex 容器里容易错位
键盘操作下 Tab 无法进入二级菜单
纯 CSS 的 :hover 菜单对键盘用户完全不可用，Tab 会直接跳过整个二级区域。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 必须配合 JavaScript 监听
keydown，当焦点在一级菜单项且按下ArrowDown时，手动聚焦第一个二级链接 - 二级菜单需设
aria-expanded="false"，展开时改为"true"，并用aria-haspopup="menu"标明是菜单 - 用
focusout判断是否移出整个菜单区域（而非单个元素），延迟 200ms 再收起，给用户留出移动焦点的时间
移动端点击展开后，滚动页面时二级菜单不跟随
固定定位（position: fixed）或绝对定位（position: absolute）在 iOS Safari 下经常脱离父容器，尤其页面有 transform 或 overflow: hidden 时。
- 放弃
position: absolute，改用position: sticky+top: 0包裹整个菜单容器，二级菜单用max-height+overflow-y: auto控制高度 - 为防 iOS 点击穿透，给一级菜单项加
cursor: pointer和-webkit-tap-highlight-color: transparent - 用
matchMedia("(max-width: 768px)")动态切换展开逻辑：小屏改用点击 toggle，大屏保留 hover
aria-current="page" 怎么动态更新才不漏掉路径匹配
静态写死 aria-current="page" 在 SPA 或多级目录下必然失效，比如当前 URL 是 /products/electronics/phones，但只匹配了 /products 就标粗，体验很怪。
- 服务端渲染场景：后端根据
request.url解析出完整路径段，逐级比对href属性值是否以该路径开头 - 前端路由场景：监听
popstate，用location.pathname.startsWith(href)替代全等匹配，支持父子路径高亮 - 避免把
aria-current加在li上——应该加在a标签上，否则屏幕阅读器不会读出“当前页”语义
真正难的不是写出一个能展开的菜单，而是让悬停、键盘、触控、屏幕阅读器、SEO 这五条路径全部走通。每个交互细节背后都有浏览器行为差异，比如 Chrome 对 focusout 的冒泡处理和 Firefox 不一样，这些没法靠一套 CSS 解决。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
