三级导航菜单栏这东西说它简单是真简单一个 ul 套 ul 再套一个 ul 就成型了说它烦也是真烦真丢进项目里hover 一抖就闪、第三级被后面的菜单项盖住、手机上点了半天没反应、改成竖排之后层级全乱毛病一个接一个往外冒。我用 HTML 加 CSS 写过不下二十个导航组件从企业后台的侧边三级树到官网顶部的下拉栏目踩的坑基本都集中在同一批地方甚至可以说是高度重复。这篇就把我平时做 HTML 三级导航菜单栏的完整思路摊开讲结构怎么搭最省后期维护成本、CSS 定位和层级怎么控制才稳、展开动画怎么做才不会闪、触屏和键盘用户怎么兼顾最后把我自己压箱底的那张排查表给你。1. 场景判断与方案选型三级导航到底该往哪个方向做1.1 三级菜单真正适用的三类页面我先说个可能有点反常识的观点大部分项目根本不需要三级菜单。菜单层级一旦到三层用户的点击路径就变成悬停 → 再悬停 → 再点中间任何一次抖动或者位置偏移都会让人直接放弃导航。所以我会先判断这个页面到底属不属于下面三类场景之一。第一类是内容架构本身就深的站点比如电商的品类导航数码 → 手机通讯 → 智能手机、企业官网的产品线解决方案 → 行业方案 → 制造业方案、后台管理系统的功能树系统设置 → 权限管理 → 角色配置。这类场景的层级是业务给的砍不掉只能老老实实做三级。第二类是功能入口多但又必须常驻顶部的场景比如开发者工具网站、文档站的信息架构。这类站点的特点是二级项本身就多十几个二级项平铺出来会把屏幕撑爆所以它需要一个二级做分组、三级做具体页面的结构。第三类是筛选型导航比如分类目录站一级是大类、二级是子类、三级是具体标签。这种的交互逻辑更像是逐级收敛跟前面两类还不太一样往往需要配合面包屑一起用。反过来说如果你的二级菜单项不超过八个我是真的建议压缩成两级或者把第三层做成二级菜单里的分组标题用一条淡色分割线隔开。少一层悬停转化率高不少这是我在好几个后台项目里实测过的。1.2 纯CSS、CSS加JS、组件库三条路各自的代价方案选型这一步很多人上来就问用哪个组件库我觉得顺序反了。先看你的约束条件这个导航要不要支持触屏、要不要支持键盘 Tab、要不要支持鼠标和触屏混合设备。纯 CSS 方案靠:hover和:focus-within展开的优点非常明显零 JS、秒开、不依赖任何框架、复制粘贴就能跑。缺点也一眼可见——在触屏设备上:hover的行为是第一次点击触发 hover 状态第二次点击才走链接跳转这个交互在安卓的某些浏览器上体验相当糟糕用户会觉得点了没反应。另外纯 CSS 方案很难做点击空白处收起和同级互斥展开。CSS 加一点 JS 的方案是我在真实项目里用得最多的桌面端继续吃 CSS 的:hover只在窄屏或触屏环境下用 JS 接管点击展开。这样做的好处是桌面端零延迟不用等 JS 事件触屏端又不会出现点两次才跳转的尴尬。组件库方案比如后台管理框架自带的 Menu 组件适合团队协作、要求样式统一的项目。代价就是你得接受它的 DOM 结构和 class 命名想改一个悬停背景色可能要翻三层嵌套选择器而且做纯静态页的时候引入成本偏高。我的判断标准很粗暴单页面、纯静态、只需要桌面端走纯 CSS要做响应式或者要上生产环境CSS 加 200 行以内的原生 JS后台系统且有统一 UI 规范直接用组件库。1.3 我给自己定下的四条硬性约束不管选哪条路我都会在动手前把这四条写进注释里它们能帮我避免后面 80% 的返工。不使用任何 CSS 框架导航组件的样式总量很小引入 Bootstrap 或者 Tailwind 反而会让层级选择器变得难读尤其是三级菜单这种需要精确控制position和z-index的地方。DOM 层级不超过三层 ul如果出现四层说明信息架构没梳理清楚我会回去跟产品对一遍而不是硬着头皮写第四层定位。禁用overflow: hidden的祖先元素这条是被坑出来的下面会详细讲。每个可展开项都必须有键盘可达的状态也就是说.nav-item:focus-within必须能展开不能只有:hover。提示这四条约束本身不是技术规范而是防止自己在赶工期的时候偷懒的心理锚点。项目紧的时候最容易犯的错就是临时用overflow: hidden去治浮动结果把下拉菜单整个剪没了。2. 结构层把HTML骨架和命名规则一次定死2.1 三层ul嵌套的标准写法三级导航的 HTML 结构我坚持用列表套列表而不是用一堆 div。原因有两个一是列表天然表达一组同类项的语义屏幕阅读器朗读时会报出列表共 4 项用户能立刻知道结构二是ul li的父子关系天然对应菜单的层级关系写 CSS 的时候子选择器能精确命中不容易误伤。结构长这样注意每一层的 class 都挂在li上而不是a上因为定位锚点必须是linav classnav aria-label主导航 ul classnav-menu li classnav-item has-sub a href# classnav-link aria-haspopuptrue aria-expandedfalse前端基础/a ul classsub-menu li classsub-item has-sub a href# classnav-link aria-haspopuptrue aria-expandedfalseHTML/a ul classsub-menu li classsub-itema href# classnav-link语义化标签/a/li li classsub-itema href# classnav-link表单与校验/a/li li classsub-itema href# classnav-link无障碍属性/a/li /ul /li li classsub-itema href# classnav-linkCSS/a/li li classsub-itema href# classnav-linkJavaScript/a/li /ul /li li classnav-item has-sub a href# classnav-link aria-haspopuptrue aria-expandedfalse项目实战/a ul classsub-menu li classsub-itema href# classnav-link静态页面/a/li li classsub-itema href# classnav-link交互组件/a/li /ul /li /ul /nav这里有一个细节值得单独说二级菜单和三级菜单共用.sub-menu这个类。为什么不分开命名成.sub-menu-2和.sub-menu-3因为它们的视觉样式背景色、圆角、阴影、条目内边距几乎完全一样只有定位方式不同而定位可以用.nav-item .sub-menu和.sub-item .sub-menu这两个选择器区分开。共用类名能让你的 CSS 少写一大坨重复代码改主题色的时候也只用改一处。至于has-sub这个类它是一个状态标记专门给 JS 用来筛选哪些链接是展开触发器。没有它JS 就得靠link.nextElementSibling.tagName UL这种脆弱判断一旦调整结构就会失效。2.2 class命名与状态类约定命名这块我踩过一次大坑。早期我用的是.menu、.menu li、.menu ul这种极简命名结果项目里同时存在顶部导航和侧边栏导航两套样式互相污染调了一下午都没找到原因。后来我固定了一套命名规则基本没再出过问题。结构类.nav导航容器、.nav-menu一级列表、.nav-item一级项、.sub-menu二级及以下列表、.sub-item二级及以下项。行为类.nav-link所有可点击的链接一级二级三级通用。状态类.has-sub有子菜单、.is-open当前展开给 JS 用、.is-active当前页面所在项用来高亮。状态类统一用is-前缀这是我在实际项目里坚持最久的一条习惯。好处是你在浏览器的 Elements 面板里搜索is-一眼就能看到当前所有激活状态排查为什么这个菜单自己展开了这类问题时特别省事。另外给所有状态类加样式的时候我习惯把选择器写得稍微重一点比如.nav .nav-item.is-open .sub-menu而不是单纯的.is-open .sub-menu。看着啰嗦但它能保证你的导航组件被塞进任何页面里都不会被外部样式污染毕竟.is-open这个名字太通用了。2.3 无障碍属性加多少才合适无障碍这块我不想讲成大道理就说三个真正会用到、而且加了不费事的属性。aria-haspopuptrue加在有子菜单的链接上告诉辅助设备点这个会弹东西。aria-expanded用来标记当前是展开还是收起桌面端 CSS hover 的时候其实用不到它但触屏端 JS 接管之后它就有意义了屏幕阅读器会根据这个值播报已展开或已折叠。aria-label加在nav容器上一个页面有多个导航区域时顶部一个、页脚一个能区分开。我不建议加的是rolemenu和rolemenuitem。这两个角色在无障碍规范里是给应用程序菜单类似桌面软件的菜单栏用方向键导航那种准备的用在普通网站导航上反而会让屏幕阅读器的行为变得奇怪。老老实实用nav ul li a的原生语义兼容性最好。注意aria-expanded的初始值一定要写成false而不是省略。省略之后某些屏幕阅读器会默认认为它是可展开的菜单按钮播报内容会莫名其妙。这个坑我在一次审计里被指出来过。3. 样式层定位、层级和动画里的关键细节3.1 一级菜单怎么排出一个稳定的定位锚点一级菜单用display: flex横排这一点没什么争议。但有个容易被忽略的细节.nav-item必须设position: relative因为二级菜单是相对它做绝对定位的。如果忘了这一条二级菜单会一层层往上找最近的定位祖先最后跑到body或者某个position: relative的外层容器上表现为菜单从页面左上角弹出来。另一个细节是flex布局下li的宽度问题。默认flex会让li根据内容自适应宽度如果你的菜单项文字长度差很多视觉上会显得不整齐。我的做法是给.nav-link设white-space: nowrap加大致均衡的内边距我常用padding: 12px 20px让每一项的宽度由文字加固定内边距决定。这样既不会折行看起来也还算整齐比强行等宽要自然。还有align-items: stretch加上它之后每个li的高度会自动撑满容器高度一级项的悬停背景色才能形成一条完整的色带。如果不加各项目高度不一鼠标移上去背景色只有文字那么高视觉上会很碎。3.2 二级菜单的绝对定位与hover缓冲带二级菜单的定位就是两行.nav-item .sub-menu { top: 100%; left: 0; }top: 100%的意思是距离父元素顶部 100% 父元素高度的位置也就是紧贴父元素底部。用百分比而不是写死像素值是因为一级菜单项的高度可能因为字号、行高变化而变写死top: 44px早晚会出问题。真正的坑在悬停缓冲带。假设你在二级菜单上写了margin-top: 8px想让它离父项远一点那么鼠标从一级项往下移动的瞬间会先进入这 8px 的空白区域——而这个区域既不属于父项也不属于子菜单:hover状态立刻丢失菜单啪地收起来了用户的手再往下移动就点不到了。这就是经典的菜单一抖就没了。我的解决办法是在二级菜单上挂一个透明的伪元素当桥.sub-menu::before { content: ; position: absolute; top: -8px; left: 0; width: 100%; height: 8px; }这段代码的意思是在菜单上方凭空长出一块 8px 高的透明区域虽然看不见但它是菜单的一部分鼠标经过时:hover不会断。它不是视觉上的间距而是命中区域上的延伸。这也是为什么我一直强调要做间距就用 padding 或伪元素别用 margin因为 margin 撑出来的是真空区。3.3 三级菜单的偏移计算和左右翻转三级菜单挂在二级项的右侧定位是.sub-item { position: relative; } .sub-item .sub-menu { top: -8px; left: 100%; }left: 100%表示紧贴二级项的右边缘。top: -8px这个负值是有讲究的它让三级菜单的顶部比二级项顶部高 8px形成一个轻微上浮的视觉效果。这个 8px 大致等于二级菜单项内边距的一半看起来像是从当前项延伸出来的而不是突兀地贴在旁边。对应的缓冲带要变成纵向的.sub-item .sub-menu::before { top: 0; left: -8px; width: 8px; height: 100%; }用height: 100%覆盖整个菜单高度比只覆盖某一个项要稳妥因为用户可能从二级菜单的任意一项往右移动。左右翻转的问题必须提前考虑。如果你的三级菜单挂在靠右的一级项下面left: 100%会让它直接飞出视口右边用户根本点不到。我的处理是加一个方向修饰类/* 默认向右展开 */ .sub-item .sub-menu { left: 100%; } /* 靠右时改为向左展开 */ .sub-item.flip-left .sub-menu { left: auto; right: 100%; } .sub-item.flip-left .sub-menu::before { left: auto; right: -8px; }翻转的时机有两种判断方式。纯 CSS 可以用:nth-last-child(-n2)粗暴地把最后两项强制向左展开够用但不够准。更准的方式是 JS 在展开时算一下var rect subMenu.getBoundingClientRect(); if (rect.right window.innerWidth - 8) { item.classList.add(flip-left); }这里的window.innerWidth - 8是留 8px 的安全边距避免菜单紧贴屏幕边缘看起来像是被切掉了。这个数字不用太精确8 到 16 都行我个人用 8。3.4 z-index分层与栈上下文陷阱z-index 这块我见过太多人靠往上加数字来解决写成 9999 之后发现还是被盖住然后就崩溃了。其实想清楚两件事就够了。第一件谁盖谁。二级菜单是.nav-item的子元素而.nav-menu是一个 flex 容器各个.nav-item是兄弟关系。当第一个.nav-item的二级菜单展开时它的宽度可能延伸到第二个.nav-item的下方。如果.sub-menu的z-index是默认的auto那么 DOM 顺序靠后的.nav-item会覆盖它。所以.sub-menu必须显式设一个z-index我一般用 30。第二件也是更隐蔽的一件栈上下文。如果.nav-item上出现了transform、filter、opacity小于 1、will-change、perspective这些属性中的任意一个它就会创建一个新的栈上下文。这时候它的子元素.sub-menu无论z-index设多大都只能在.nav-item这个小盒子内部比较大小跟盒子外面的兄弟根本没法比。结果就是你 z-index 加到 99999 也没用。我踩这个坑的原因是想给一级项做一个悬停时的transform: translateY(-2px)微动效加上之后下拉菜单立刻被后面的菜单项盖住了。解决办法是把动效移到.nav-link上或者用box-shadow代替位移。真要做左右翻转和方向判断translate也只能加在.sub-menu自己身上不能加在.nav-item上。这条我建议你写个注释钉在样式表里。提示排查 z-index 失效最快的方法是打开浏览器的 Layers 面板或者用 3D 视图看一眼到底是谁创建了栈上下文。这个面板看着花哨但确实是省时间的工具。3.5 用opacity加visibility做出不闪的展开动画展开动画这块很多人第一反应是display: none切display: block然后发现过渡动画完全不生效——因为display不是一个可以过渡的属性浏览器只在两个离散值之间瞬间切换。三种常见做法各有代价。用display切换是没动画的用height: 0到height: auto是没法过渡的auto不是具体数值用transform: scaleY(0)会让文字被压扁视觉上很廉价。我最终固定下来的是opacity 加 visibility 加 transform 的组合.sub-menu { opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; } .nav-item:hover .sub-menu, .nav-item:focus-within .sub-menu { opacity: 1; visibility: visible; transform: translate(0, 0); }visibility是可以参与过渡的它的插值方式是阶梯式从hidden到visible时立刻变可见从visible到hidden时则在过渡结束的那一刻才真正隐藏。这个特性刚好就是我们要的——展开时立刻出现收起时等动画播完再消失中间不会出现菜单已经隐藏但动画还在半路的诡异状态。transform: translateY(6px)给了一个 6px 的位移配合opacity形成轻微的从上往下浮出来的感觉。位移值别太大6px 到 8px 就够了再大就显得拖沓而且位移越大缓冲带要预留的空间也越大。transition时长我用.18s。经验值小于.12s会感觉是跳出来的大于.25s会感觉菜单黏在鼠标后面。.18s是我在十几个项目里调出来最舒服的一档。另外这里必须加一个媒体查询来做降级media (hover: none) { .nav-item:hover .sub-menu, .sub-item:hover .sub-menu { opacity: 0; visibility: hidden; transform: translateY(6px); } }原因是在触屏设备上点击之后:hover状态会粘在元素上不下来用户点完一个菜单滑到别处那个菜单还开着看起来像卡死了。用(hover: none)把触屏环境下的悬停展开彻底关掉交给 JS 的.is-open来控制干净利落。4. 完整实操从空白文件到能点的三级导航4.1 第一步HTML骨架落地先把文档头写标准这一步很多人图快会漏掉viewport结果在手机上整个页面被缩小成一小块菜单完全没法点。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1 titleHTML三级导航菜单栏/title /head body !-- 导航结构放这里 -- /body /htmllangzh-CN影响的是字体回退策略和屏幕阅读器的发音中文页面写zh-CN比写zh要准确一些。charset必须是UTF-8这个不用多说。结构部分用第 2.1 节那套骨架注意把示例里的href#换成真实链接。我习惯在开发阶段给所有二级、三级的li都加上has-sub类占位等定稿了再把没有子菜单的删掉这样能避免改结构的时候忘了加类名。4.2 第二步基础样式与主菜单排布先把重置和一级菜单写出来* { margin: 0; padding: 0; box-sizing: border-box; } .nav { background: #1f2937; font: 14px/1.5 Microsoft YaHei, system-ui, sans-serif; } .nav-menu, .sub-menu { list-style: none; } .nav-menu { display: flex; align-items: stretch; } .nav-item { position: relative; } .nav-link { display: block; padding: 12px 20px; color: #e5e7eb; text-decoration: none; white-space: nowrap; transition: background-color .15s ease; } .nav-item:hover .nav-link, .nav-item:focus-within .nav-link { background: #374151; }box-sizing: border-box这一行必须放在最前面不然后面设置的padding会把菜单项的宽度算爆一级菜单可能撑出横向滚动条。.nav-link上的display: block也是关键。如果a是行内元素它的点击区域只有文字那么高鼠标稍微偏一点就点不到改成块级之后整个内边距区域都能响应悬停手感会好很多。transition: background-color .15s只过渡背景色这是有意为之——不要图省事写transition: all那样一旦后面给.nav-link加上别的属性比如transform会莫名其妙地触发动画而且all对性能也不友好。4.3 第三步二三级菜单的定位与展开把第 3 章讲的定位、缓冲带、动画、层级一次性写全.sub-menu { position: absolute; min-width: 168px; padding: 6px 0; background: #273449; border-radius: 4px; box-shadow: 0 10px 24px rgba(0, 0, 0, .22); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 30; } .nav-item .sub-menu { top: 100%; left: 0; } .sub-item { position: relative; } .sub-item .sub-menu { top: -6px; left: 100%; transform: translateX(6px); } .sub-menu::before { content: ; position: absolute; top: -6px; left: 0; width: 100%; height: 6px; } .sub-item .sub-menu::before { top: 0; left: -6px; width: 6px; height: 100%; } .nav-item:hover .sub-menu, .nav-item:focus-within .sub-menu, .sub-item:hover .sub-menu, .sub-item:focus-within .sub-menu, .nav-item.is-open .sub-menu, .sub-item.is-open .sub-menu { opacity: 1; visibility: visible; transform: translate(0, 0); }min-width: 168px这个值是这么算出来的中文文字宽度按 14px 字号算一个字约 14px六七个字约 90px 到 100px加上左右各 20px 的内边距差不多 140px再留一点余量防止六字以上的菜单项换行取 168px 是个比较通用的档位。如果你的菜单项文字普遍偏长直接改大就行不用纠结。padding: 6px 0是给菜单整体上下留白让条目不要贴到菜单边框上视觉上透气一些。注意.sub-item .sub-menu的隐藏状态用了translateX(6px)而不是translateY这样三级菜单是从左侧滑进来的方向感和它的位置一致。统一用translateY也能跑但看起来会有点别扭。4.4 第四步JS补齐触屏点击、空白收起和Esc桌面端的 CSS 已经能跑了现在补上触屏和键盘的部分。整段 JS 控制在 50 行以内(function () { var mqHover window.matchMedia((hover: hover)); var mqWide window.matchMedia((min-width: 769px)); var nav document.querySelector(.nav); if (!nav) return; // 1. 触屏或窄屏点击展开 nav.querySelectorAll(.has-sub .nav-link).forEach(function (link) { link.addEventListener(click, function (e) { // 桌面宽屏交给 CSS 的 hover 处理不拦截跳转 if (mqHover.matches mqWide.matches) return; e.preventDefault(); var item link.parentElement; var willOpen !item.classList.contains(is-open); // 同级互斥先收起所有兄弟 Array.prototype.forEach.call(item.parentElement.children, function (sib) { sib.classList.remove(is-open); var sibLink sib.querySelector(.nav-link); if (sibLink sibLink.hasAttribute(aria-expanded)) { sibLink.setAttribute(aria-expanded, false); } }); if (willOpen) { item.classList.add(is-open); link.setAttribute(aria-expanded, true); } }); }); // 2. 点击空白处收起全部 document.addEventListener(click, function (e) { if (nav.contains(e.target)) return; nav.querySelectorAll(.is-open).forEach(function (item) { item.classList.remove(is-open); var link item.querySelector(.nav-link); if (link link.hasAttribute(aria-expanded)) { link.setAttribute(aria-expanded, false); } }); }); // 3. Esc 关闭 document.addEventListener(keydown, function (e) { if (e.key ! Escape) return; nav.querySelectorAll(.is-open).forEach(function (item) { item.classList.remove(is-open); }); }); })();这里有几个地方值得解释。mqHover.matches mqWide.matches这个判断是整段代码的核心。它的意思是只有在支持悬停的设备和宽屏环境下才放过这次点击。反过来触屏设备或者窄屏下点击会被拦截并转成展开操作。这样一来桌面端用户点一级菜单还是正常跳转手机用户点一级菜单则是展开二级两种行为互不干扰。同级互斥那段遍历item.parentElement.children是因为同一个父菜单下如果同时展开两个二级菜单两个面板会叠在一起非常难看。这里我用的是原生forEach而不是querySelectorAll因为children返回的是 HTMLCollection没有forEach方法得用Array.prototype.forEach.call包一层。这个小细节很多人会漏然后在控制台里看到children.forEach is not a function报错。nav.contains(e.target)用来判断点击是否发生在导航内部。如果点的是页面其他位置就把所有展开状态清掉——这个交互用户已经形成习惯了不做反而会觉得别扭。Esc 关闭主要服务于键盘用户。键盘用户用 Tab 逐个聚焦链接时focus-within会让菜单自动展开但如果他按下 Esc期望的是退出这个菜单这时候就需要手动清掉.is-open。4.5 第五步窄屏竖排折叠改造窄屏下如果还保留绝对定位的下拉菜单会飞出屏幕所以要改成内联展开——也就是点击之后子菜单在下方原地展开把后面的内容往下推。media (max-width: 768px) { .nav-menu { flex-direction: column; } .sub-menu { position: static; min-width: 0; padding: 0; background: #1a2333; border-radius: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; transition: none; display: none; } .sub-menu::before { display: none; } .nav-item.is-open .sub-menu, .sub-item.is-open .sub-menu { display: block; transform: none; } }关键点是position: static。一旦改成静态定位之前设置的top、left全部失效静态定位元素会忽略偏移属性子菜单就自然回到文档流里跟在父项下方。同时min-width要归零否则在窄屏上会撑出横向滚动条。::before缓冲带在竖排场景下必须display: none因为它是一块 6px 高的绝对定位区域在静态布局里会变成一根奇怪的细线。display: none和display: block之间的切换在这里是允许的因为竖排场景下我们接受瞬间展开不做动画。如果你非要加动画那就得回到max-height的写法但那会引入内容高度算不准的新问题我一般不做。注意断点我选的是 768px这个值没有绝对标准需要看你的导航项数量和文字长度。判断依据是——如果一级菜单在某个宽度下已经挤到两行或者出现横向滚动条那就是该断的点了。别硬套 768。5. 常见问题与排查技巧实录5.1 hover闪断、抖动、穿透的三种成因成因一用了 margin 做间距。这是最常见的。只要一级项和二级菜单之间有 margin 撑开的空隙鼠标经过就会丢失 hover。改成 padding 加伪元素桥问题立刻消失。成因二祖先元素有overflow: hidden或overflow: auto。绝对定位的子菜单会被裁剪掉超出部分。这个坑特别隐蔽因为overflow: hidden往往是为了治浮动或者做圆角裁剪而加的写在三四层之外的外层容器上你盯着导航的 CSS 看半天也找不到原因。排查方法是打开 DevTools从.sub-menu往上逐层点看 Computed 面板里哪一层有overflow值。成因三.sub-menu上有pointer-events: none而展开时忘了改回来。有些人为了做动画在隐藏态设了pointer-events: none但展开态忘了设auto结果菜单看得见点不着。用visibility: hidden其实就够了不需要pointer-events能少用一个属性就少用一个。还有一种抖动是动画本身引起的如果隐藏态和展开态的transform方向相反比如隐藏是translateY(6px)展开写成translateY(-6px)菜单会出现来回弹跳。展开态的transform一律写translate(0, 0)别写反向值。5.2 三级菜单被遮挡或点了没反应按这个顺序查我排查这类问题有一套固定顺序基本三轮之内能定位。第一轮看 z-index 有没有生效。打开 DevTools 选中.sub-menu看 Computed 面板里的z-index值是不是被划掉了。被划掉说明父元素创建了栈上下文往上找transform、filter、will-change、opacity小于 1 的元素。找到之后把这些属性移到.nav-link上。第二轮看是不是被clip-path或overflow剪掉了。在 Elements 面板里把可疑的祖先元素临时取消overflow: hidden如果菜单立刻出现那就找到根源了。解决方式是把裁剪容器改成不裁剪或者把菜单挪出裁剪容器用 JS 计算位置这是最后手段不推荐。第三轮看点击事件有没有被拦截。如果菜单能看见但点不动在控制台里执行document.elementFromPoint(x, y)把菜单项的坐标填进去看返回的是不是那个链接。如果返回的是别的元素比如一个覆盖在上面的空白 div 或者伪元素说明有东西挡住了它。这种情况下检查一下有没有哪个::before忘了设pointer-events。5.3 常见问题速查表现象最可能的原因处理方式鼠标移向子菜单时菜单收起用了 margin 撑间距中间有真空区改用 padding并在.sub-menu::before上补一条透明缓冲带三级菜单被后面的菜单项盖住.sub-menu没设z-index被 DOM 靠后的兄弟项覆盖给.sub-menu设z-index: 30z-index 加到很大仍然被盖住父级.nav-item上有transform等属性创建了栈上下文把transform移到.nav-link或.sub-menu上子菜单完全不显示祖先元素有overflow: hidden逐层排查并去掉裁剪手机上点一次菜单没反应触屏上:hover需要点两次才触发链接用(hover: none)关掉悬停展开改 JS 点击控制收起动画播到一半菜单闪一下display参与切换换成opacity加visibility组合三级菜单飞出屏幕右边固定left: 100%没做方向判断加flip-left类或 JS 计算后翻转键盘 Tab 走到菜单项时不展开只写了:hover没写:focus-within每个悬停选择器都补一个:focus-within版本竖排之后菜单项挤在一起窄屏下min-width没归零在媒体查询里把min-width设为 06. 还能再抠的几个细节6.1 展开方向自适应与视口边界除了三级菜单的左右翻转二级菜单的上下方向在极端情况下也要考虑。比如你的导航栏贴近页面底部某些设计会把主导航放在页脚上方top: 100%会让二级菜单直接跑到视口外面。处理方式是加一个向上展开的修饰类.nav-item.drop-up .sub-menu { top: auto; bottom: 100%; transform: translateY(-6px); } .nav-item.drop-up .sub-menu::before { top: auto; bottom: -6px; }注意隐藏态的transform也要跟着改成负值展开态还是translate(0, 0)这样动画方向和位置才一致。缓冲带的top: auto; bottom: -6px也是必须的否则桥会长在错误的一侧。判断逻辑跟左右翻转一样展开前算一下getBoundingClientRect().bottom和window.innerHeight的关系就行。我一般在打开的时候判断一次不监听滚动因为导航栏本身不会在滚动中移动位置。6.2 性能与可维护性上的小优化性能上能做的其实不多但有两处值得说。一是只过渡opacity和transform这两个属性可以走 GPU 合成不会触发重排。如果你过渡的是top或者height每帧都要重新计算布局菜单一多就会卡。这个原则在做侧边三级树的时候尤其重要因为侧边树的展开会推动后面所有内容。二是**will-change别乱加**。有些人看到提升性能的建议就给所有.sub-menu加上will-change: transform结果页面里十几个菜单同时创建了合成层内存占用直接飙上去反而更卡。我的做法是不加只有在实测发现动画掉帧的时候才给当前悬停的那一项通过 JS 临时加上动画结束再移除。可维护性上我习惯把所有颜色、间距、动画时长抽成 CSS 变量放在.nav上.nav { --nav-bg: #1f2937; --nav-item-hover: #374151; --nav-sub-bg: #273449; --nav-text: #e5e7eb; --nav-radius: 4px; --nav-duration: .18s; --nav-shadow: 0 10px 24px rgba(0, 0, 0, .22); }这样换主题色的时候只改这一处而且改哪几个变量一目了然。这套变量我在三个后台系统里复用过从深色主题切到浅色主题基本就是改五个值的事不用去翻那一百多行定位代码。最后再分享一个我用了很久的小技巧给导航容器加一个调试用的类比如.nav--debug里面写上.nav--debug .sub-menu { opacity: 1; visibility: visible; transform: none; outline: 1px dashed #f00; }。开发阶段把它挂上去所有层级的菜单会同时显示出来并带红色虚线框你能一眼看到每一级的位置、偏移量和缓冲带是否正确比如三级菜单有没有压到二级菜单上、缓冲带的宽度够不够。调完把类删掉就行比来回移动鼠标触发悬停去观察效率高得多。尤其是做左右翻转的时候不这么做你根本没法同时看到两个方向的效果。
HTML三级导航菜单栏避坑指南：CSS定位、hover动画与触屏兼容
三级导航菜单栏这东西说它简单是真简单一个 ul 套 ul 再套一个 ul 就成型了说它烦也是真烦真丢进项目里hover 一抖就闪、第三级被后面的菜单项盖住、手机上点了半天没反应、改成竖排之后层级全乱毛病一个接一个往外冒。我用 HTML 加 CSS 写过不下二十个导航组件从企业后台的侧边三级树到官网顶部的下拉栏目踩的坑基本都集中在同一批地方甚至可以说是高度重复。这篇就把我平时做 HTML 三级导航菜单栏的完整思路摊开讲结构怎么搭最省后期维护成本、CSS 定位和层级怎么控制才稳、展开动画怎么做才不会闪、触屏和键盘用户怎么兼顾最后把我自己压箱底的那张排查表给你。1. 场景判断与方案选型三级导航到底该往哪个方向做1.1 三级菜单真正适用的三类页面我先说个可能有点反常识的观点大部分项目根本不需要三级菜单。菜单层级一旦到三层用户的点击路径就变成悬停 → 再悬停 → 再点中间任何一次抖动或者位置偏移都会让人直接放弃导航。所以我会先判断这个页面到底属不属于下面三类场景之一。第一类是内容架构本身就深的站点比如电商的品类导航数码 → 手机通讯 → 智能手机、企业官网的产品线解决方案 → 行业方案 → 制造业方案、后台管理系统的功能树系统设置 → 权限管理 → 角色配置。这类场景的层级是业务给的砍不掉只能老老实实做三级。第二类是功能入口多但又必须常驻顶部的场景比如开发者工具网站、文档站的信息架构。这类站点的特点是二级项本身就多十几个二级项平铺出来会把屏幕撑爆所以它需要一个二级做分组、三级做具体页面的结构。第三类是筛选型导航比如分类目录站一级是大类、二级是子类、三级是具体标签。这种的交互逻辑更像是逐级收敛跟前面两类还不太一样往往需要配合面包屑一起用。反过来说如果你的二级菜单项不超过八个我是真的建议压缩成两级或者把第三层做成二级菜单里的分组标题用一条淡色分割线隔开。少一层悬停转化率高不少这是我在好几个后台项目里实测过的。1.2 纯CSS、CSS加JS、组件库三条路各自的代价方案选型这一步很多人上来就问用哪个组件库我觉得顺序反了。先看你的约束条件这个导航要不要支持触屏、要不要支持键盘 Tab、要不要支持鼠标和触屏混合设备。纯 CSS 方案靠:hover和:focus-within展开的优点非常明显零 JS、秒开、不依赖任何框架、复制粘贴就能跑。缺点也一眼可见——在触屏设备上:hover的行为是第一次点击触发 hover 状态第二次点击才走链接跳转这个交互在安卓的某些浏览器上体验相当糟糕用户会觉得点了没反应。另外纯 CSS 方案很难做点击空白处收起和同级互斥展开。CSS 加一点 JS 的方案是我在真实项目里用得最多的桌面端继续吃 CSS 的:hover只在窄屏或触屏环境下用 JS 接管点击展开。这样做的好处是桌面端零延迟不用等 JS 事件触屏端又不会出现点两次才跳转的尴尬。组件库方案比如后台管理框架自带的 Menu 组件适合团队协作、要求样式统一的项目。代价就是你得接受它的 DOM 结构和 class 命名想改一个悬停背景色可能要翻三层嵌套选择器而且做纯静态页的时候引入成本偏高。我的判断标准很粗暴单页面、纯静态、只需要桌面端走纯 CSS要做响应式或者要上生产环境CSS 加 200 行以内的原生 JS后台系统且有统一 UI 规范直接用组件库。1.3 我给自己定下的四条硬性约束不管选哪条路我都会在动手前把这四条写进注释里它们能帮我避免后面 80% 的返工。不使用任何 CSS 框架导航组件的样式总量很小引入 Bootstrap 或者 Tailwind 反而会让层级选择器变得难读尤其是三级菜单这种需要精确控制position和z-index的地方。DOM 层级不超过三层 ul如果出现四层说明信息架构没梳理清楚我会回去跟产品对一遍而不是硬着头皮写第四层定位。禁用overflow: hidden的祖先元素这条是被坑出来的下面会详细讲。每个可展开项都必须有键盘可达的状态也就是说.nav-item:focus-within必须能展开不能只有:hover。提示这四条约束本身不是技术规范而是防止自己在赶工期的时候偷懒的心理锚点。项目紧的时候最容易犯的错就是临时用overflow: hidden去治浮动结果把下拉菜单整个剪没了。2. 结构层把HTML骨架和命名规则一次定死2.1 三层ul嵌套的标准写法三级导航的 HTML 结构我坚持用列表套列表而不是用一堆 div。原因有两个一是列表天然表达一组同类项的语义屏幕阅读器朗读时会报出列表共 4 项用户能立刻知道结构二是ul li的父子关系天然对应菜单的层级关系写 CSS 的时候子选择器能精确命中不容易误伤。结构长这样注意每一层的 class 都挂在li上而不是a上因为定位锚点必须是linav classnav aria-label主导航 ul classnav-menu li classnav-item has-sub a href# classnav-link aria-haspopuptrue aria-expandedfalse前端基础/a ul classsub-menu li classsub-item has-sub a href# classnav-link aria-haspopuptrue aria-expandedfalseHTML/a ul classsub-menu li classsub-itema href# classnav-link语义化标签/a/li li classsub-itema href# classnav-link表单与校验/a/li li classsub-itema href# classnav-link无障碍属性/a/li /ul /li li classsub-itema href# classnav-linkCSS/a/li li classsub-itema href# classnav-linkJavaScript/a/li /ul /li li classnav-item has-sub a href# classnav-link aria-haspopuptrue aria-expandedfalse项目实战/a ul classsub-menu li classsub-itema href# classnav-link静态页面/a/li li classsub-itema href# classnav-link交互组件/a/li /ul /li /ul /nav这里有一个细节值得单独说二级菜单和三级菜单共用.sub-menu这个类。为什么不分开命名成.sub-menu-2和.sub-menu-3因为它们的视觉样式背景色、圆角、阴影、条目内边距几乎完全一样只有定位方式不同而定位可以用.nav-item .sub-menu和.sub-item .sub-menu这两个选择器区分开。共用类名能让你的 CSS 少写一大坨重复代码改主题色的时候也只用改一处。至于has-sub这个类它是一个状态标记专门给 JS 用来筛选哪些链接是展开触发器。没有它JS 就得靠link.nextElementSibling.tagName UL这种脆弱判断一旦调整结构就会失效。2.2 class命名与状态类约定命名这块我踩过一次大坑。早期我用的是.menu、.menu li、.menu ul这种极简命名结果项目里同时存在顶部导航和侧边栏导航两套样式互相污染调了一下午都没找到原因。后来我固定了一套命名规则基本没再出过问题。结构类.nav导航容器、.nav-menu一级列表、.nav-item一级项、.sub-menu二级及以下列表、.sub-item二级及以下项。行为类.nav-link所有可点击的链接一级二级三级通用。状态类.has-sub有子菜单、.is-open当前展开给 JS 用、.is-active当前页面所在项用来高亮。状态类统一用is-前缀这是我在实际项目里坚持最久的一条习惯。好处是你在浏览器的 Elements 面板里搜索is-一眼就能看到当前所有激活状态排查为什么这个菜单自己展开了这类问题时特别省事。另外给所有状态类加样式的时候我习惯把选择器写得稍微重一点比如.nav .nav-item.is-open .sub-menu而不是单纯的.is-open .sub-menu。看着啰嗦但它能保证你的导航组件被塞进任何页面里都不会被外部样式污染毕竟.is-open这个名字太通用了。2.3 无障碍属性加多少才合适无障碍这块我不想讲成大道理就说三个真正会用到、而且加了不费事的属性。aria-haspopuptrue加在有子菜单的链接上告诉辅助设备点这个会弹东西。aria-expanded用来标记当前是展开还是收起桌面端 CSS hover 的时候其实用不到它但触屏端 JS 接管之后它就有意义了屏幕阅读器会根据这个值播报已展开或已折叠。aria-label加在nav容器上一个页面有多个导航区域时顶部一个、页脚一个能区分开。我不建议加的是rolemenu和rolemenuitem。这两个角色在无障碍规范里是给应用程序菜单类似桌面软件的菜单栏用方向键导航那种准备的用在普通网站导航上反而会让屏幕阅读器的行为变得奇怪。老老实实用nav ul li a的原生语义兼容性最好。注意aria-expanded的初始值一定要写成false而不是省略。省略之后某些屏幕阅读器会默认认为它是可展开的菜单按钮播报内容会莫名其妙。这个坑我在一次审计里被指出来过。3. 样式层定位、层级和动画里的关键细节3.1 一级菜单怎么排出一个稳定的定位锚点一级菜单用display: flex横排这一点没什么争议。但有个容易被忽略的细节.nav-item必须设position: relative因为二级菜单是相对它做绝对定位的。如果忘了这一条二级菜单会一层层往上找最近的定位祖先最后跑到body或者某个position: relative的外层容器上表现为菜单从页面左上角弹出来。另一个细节是flex布局下li的宽度问题。默认flex会让li根据内容自适应宽度如果你的菜单项文字长度差很多视觉上会显得不整齐。我的做法是给.nav-link设white-space: nowrap加大致均衡的内边距我常用padding: 12px 20px让每一项的宽度由文字加固定内边距决定。这样既不会折行看起来也还算整齐比强行等宽要自然。还有align-items: stretch加上它之后每个li的高度会自动撑满容器高度一级项的悬停背景色才能形成一条完整的色带。如果不加各项目高度不一鼠标移上去背景色只有文字那么高视觉上会很碎。3.2 二级菜单的绝对定位与hover缓冲带二级菜单的定位就是两行.nav-item .sub-menu { top: 100%; left: 0; }top: 100%的意思是距离父元素顶部 100% 父元素高度的位置也就是紧贴父元素底部。用百分比而不是写死像素值是因为一级菜单项的高度可能因为字号、行高变化而变写死top: 44px早晚会出问题。真正的坑在悬停缓冲带。假设你在二级菜单上写了margin-top: 8px想让它离父项远一点那么鼠标从一级项往下移动的瞬间会先进入这 8px 的空白区域——而这个区域既不属于父项也不属于子菜单:hover状态立刻丢失菜单啪地收起来了用户的手再往下移动就点不到了。这就是经典的菜单一抖就没了。我的解决办法是在二级菜单上挂一个透明的伪元素当桥.sub-menu::before { content: ; position: absolute; top: -8px; left: 0; width: 100%; height: 8px; }这段代码的意思是在菜单上方凭空长出一块 8px 高的透明区域虽然看不见但它是菜单的一部分鼠标经过时:hover不会断。它不是视觉上的间距而是命中区域上的延伸。这也是为什么我一直强调要做间距就用 padding 或伪元素别用 margin因为 margin 撑出来的是真空区。3.3 三级菜单的偏移计算和左右翻转三级菜单挂在二级项的右侧定位是.sub-item { position: relative; } .sub-item .sub-menu { top: -8px; left: 100%; }left: 100%表示紧贴二级项的右边缘。top: -8px这个负值是有讲究的它让三级菜单的顶部比二级项顶部高 8px形成一个轻微上浮的视觉效果。这个 8px 大致等于二级菜单项内边距的一半看起来像是从当前项延伸出来的而不是突兀地贴在旁边。对应的缓冲带要变成纵向的.sub-item .sub-menu::before { top: 0; left: -8px; width: 8px; height: 100%; }用height: 100%覆盖整个菜单高度比只覆盖某一个项要稳妥因为用户可能从二级菜单的任意一项往右移动。左右翻转的问题必须提前考虑。如果你的三级菜单挂在靠右的一级项下面left: 100%会让它直接飞出视口右边用户根本点不到。我的处理是加一个方向修饰类/* 默认向右展开 */ .sub-item .sub-menu { left: 100%; } /* 靠右时改为向左展开 */ .sub-item.flip-left .sub-menu { left: auto; right: 100%; } .sub-item.flip-left .sub-menu::before { left: auto; right: -8px; }翻转的时机有两种判断方式。纯 CSS 可以用:nth-last-child(-n2)粗暴地把最后两项强制向左展开够用但不够准。更准的方式是 JS 在展开时算一下var rect subMenu.getBoundingClientRect(); if (rect.right window.innerWidth - 8) { item.classList.add(flip-left); }这里的window.innerWidth - 8是留 8px 的安全边距避免菜单紧贴屏幕边缘看起来像是被切掉了。这个数字不用太精确8 到 16 都行我个人用 8。3.4 z-index分层与栈上下文陷阱z-index 这块我见过太多人靠往上加数字来解决写成 9999 之后发现还是被盖住然后就崩溃了。其实想清楚两件事就够了。第一件谁盖谁。二级菜单是.nav-item的子元素而.nav-menu是一个 flex 容器各个.nav-item是兄弟关系。当第一个.nav-item的二级菜单展开时它的宽度可能延伸到第二个.nav-item的下方。如果.sub-menu的z-index是默认的auto那么 DOM 顺序靠后的.nav-item会覆盖它。所以.sub-menu必须显式设一个z-index我一般用 30。第二件也是更隐蔽的一件栈上下文。如果.nav-item上出现了transform、filter、opacity小于 1、will-change、perspective这些属性中的任意一个它就会创建一个新的栈上下文。这时候它的子元素.sub-menu无论z-index设多大都只能在.nav-item这个小盒子内部比较大小跟盒子外面的兄弟根本没法比。结果就是你 z-index 加到 99999 也没用。我踩这个坑的原因是想给一级项做一个悬停时的transform: translateY(-2px)微动效加上之后下拉菜单立刻被后面的菜单项盖住了。解决办法是把动效移到.nav-link上或者用box-shadow代替位移。真要做左右翻转和方向判断translate也只能加在.sub-menu自己身上不能加在.nav-item上。这条我建议你写个注释钉在样式表里。提示排查 z-index 失效最快的方法是打开浏览器的 Layers 面板或者用 3D 视图看一眼到底是谁创建了栈上下文。这个面板看着花哨但确实是省时间的工具。3.5 用opacity加visibility做出不闪的展开动画展开动画这块很多人第一反应是display: none切display: block然后发现过渡动画完全不生效——因为display不是一个可以过渡的属性浏览器只在两个离散值之间瞬间切换。三种常见做法各有代价。用display切换是没动画的用height: 0到height: auto是没法过渡的auto不是具体数值用transform: scaleY(0)会让文字被压扁视觉上很廉价。我最终固定下来的是opacity 加 visibility 加 transform 的组合.sub-menu { opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; } .nav-item:hover .sub-menu, .nav-item:focus-within .sub-menu { opacity: 1; visibility: visible; transform: translate(0, 0); }visibility是可以参与过渡的它的插值方式是阶梯式从hidden到visible时立刻变可见从visible到hidden时则在过渡结束的那一刻才真正隐藏。这个特性刚好就是我们要的——展开时立刻出现收起时等动画播完再消失中间不会出现菜单已经隐藏但动画还在半路的诡异状态。transform: translateY(6px)给了一个 6px 的位移配合opacity形成轻微的从上往下浮出来的感觉。位移值别太大6px 到 8px 就够了再大就显得拖沓而且位移越大缓冲带要预留的空间也越大。transition时长我用.18s。经验值小于.12s会感觉是跳出来的大于.25s会感觉菜单黏在鼠标后面。.18s是我在十几个项目里调出来最舒服的一档。另外这里必须加一个媒体查询来做降级media (hover: none) { .nav-item:hover .sub-menu, .sub-item:hover .sub-menu { opacity: 0; visibility: hidden; transform: translateY(6px); } }原因是在触屏设备上点击之后:hover状态会粘在元素上不下来用户点完一个菜单滑到别处那个菜单还开着看起来像卡死了。用(hover: none)把触屏环境下的悬停展开彻底关掉交给 JS 的.is-open来控制干净利落。4. 完整实操从空白文件到能点的三级导航4.1 第一步HTML骨架落地先把文档头写标准这一步很多人图快会漏掉viewport结果在手机上整个页面被缩小成一小块菜单完全没法点。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1 titleHTML三级导航菜单栏/title /head body !-- 导航结构放这里 -- /body /htmllangzh-CN影响的是字体回退策略和屏幕阅读器的发音中文页面写zh-CN比写zh要准确一些。charset必须是UTF-8这个不用多说。结构部分用第 2.1 节那套骨架注意把示例里的href#换成真实链接。我习惯在开发阶段给所有二级、三级的li都加上has-sub类占位等定稿了再把没有子菜单的删掉这样能避免改结构的时候忘了加类名。4.2 第二步基础样式与主菜单排布先把重置和一级菜单写出来* { margin: 0; padding: 0; box-sizing: border-box; } .nav { background: #1f2937; font: 14px/1.5 Microsoft YaHei, system-ui, sans-serif; } .nav-menu, .sub-menu { list-style: none; } .nav-menu { display: flex; align-items: stretch; } .nav-item { position: relative; } .nav-link { display: block; padding: 12px 20px; color: #e5e7eb; text-decoration: none; white-space: nowrap; transition: background-color .15s ease; } .nav-item:hover .nav-link, .nav-item:focus-within .nav-link { background: #374151; }box-sizing: border-box这一行必须放在最前面不然后面设置的padding会把菜单项的宽度算爆一级菜单可能撑出横向滚动条。.nav-link上的display: block也是关键。如果a是行内元素它的点击区域只有文字那么高鼠标稍微偏一点就点不到改成块级之后整个内边距区域都能响应悬停手感会好很多。transition: background-color .15s只过渡背景色这是有意为之——不要图省事写transition: all那样一旦后面给.nav-link加上别的属性比如transform会莫名其妙地触发动画而且all对性能也不友好。4.3 第三步二三级菜单的定位与展开把第 3 章讲的定位、缓冲带、动画、层级一次性写全.sub-menu { position: absolute; min-width: 168px; padding: 6px 0; background: #273449; border-radius: 4px; box-shadow: 0 10px 24px rgba(0, 0, 0, .22); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 30; } .nav-item .sub-menu { top: 100%; left: 0; } .sub-item { position: relative; } .sub-item .sub-menu { top: -6px; left: 100%; transform: translateX(6px); } .sub-menu::before { content: ; position: absolute; top: -6px; left: 0; width: 100%; height: 6px; } .sub-item .sub-menu::before { top: 0; left: -6px; width: 6px; height: 100%; } .nav-item:hover .sub-menu, .nav-item:focus-within .sub-menu, .sub-item:hover .sub-menu, .sub-item:focus-within .sub-menu, .nav-item.is-open .sub-menu, .sub-item.is-open .sub-menu { opacity: 1; visibility: visible; transform: translate(0, 0); }min-width: 168px这个值是这么算出来的中文文字宽度按 14px 字号算一个字约 14px六七个字约 90px 到 100px加上左右各 20px 的内边距差不多 140px再留一点余量防止六字以上的菜单项换行取 168px 是个比较通用的档位。如果你的菜单项文字普遍偏长直接改大就行不用纠结。padding: 6px 0是给菜单整体上下留白让条目不要贴到菜单边框上视觉上透气一些。注意.sub-item .sub-menu的隐藏状态用了translateX(6px)而不是translateY这样三级菜单是从左侧滑进来的方向感和它的位置一致。统一用translateY也能跑但看起来会有点别扭。4.4 第四步JS补齐触屏点击、空白收起和Esc桌面端的 CSS 已经能跑了现在补上触屏和键盘的部分。整段 JS 控制在 50 行以内(function () { var mqHover window.matchMedia((hover: hover)); var mqWide window.matchMedia((min-width: 769px)); var nav document.querySelector(.nav); if (!nav) return; // 1. 触屏或窄屏点击展开 nav.querySelectorAll(.has-sub .nav-link).forEach(function (link) { link.addEventListener(click, function (e) { // 桌面宽屏交给 CSS 的 hover 处理不拦截跳转 if (mqHover.matches mqWide.matches) return; e.preventDefault(); var item link.parentElement; var willOpen !item.classList.contains(is-open); // 同级互斥先收起所有兄弟 Array.prototype.forEach.call(item.parentElement.children, function (sib) { sib.classList.remove(is-open); var sibLink sib.querySelector(.nav-link); if (sibLink sibLink.hasAttribute(aria-expanded)) { sibLink.setAttribute(aria-expanded, false); } }); if (willOpen) { item.classList.add(is-open); link.setAttribute(aria-expanded, true); } }); }); // 2. 点击空白处收起全部 document.addEventListener(click, function (e) { if (nav.contains(e.target)) return; nav.querySelectorAll(.is-open).forEach(function (item) { item.classList.remove(is-open); var link item.querySelector(.nav-link); if (link link.hasAttribute(aria-expanded)) { link.setAttribute(aria-expanded, false); } }); }); // 3. Esc 关闭 document.addEventListener(keydown, function (e) { if (e.key ! Escape) return; nav.querySelectorAll(.is-open).forEach(function (item) { item.classList.remove(is-open); }); }); })();这里有几个地方值得解释。mqHover.matches mqWide.matches这个判断是整段代码的核心。它的意思是只有在支持悬停的设备和宽屏环境下才放过这次点击。反过来触屏设备或者窄屏下点击会被拦截并转成展开操作。这样一来桌面端用户点一级菜单还是正常跳转手机用户点一级菜单则是展开二级两种行为互不干扰。同级互斥那段遍历item.parentElement.children是因为同一个父菜单下如果同时展开两个二级菜单两个面板会叠在一起非常难看。这里我用的是原生forEach而不是querySelectorAll因为children返回的是 HTMLCollection没有forEach方法得用Array.prototype.forEach.call包一层。这个小细节很多人会漏然后在控制台里看到children.forEach is not a function报错。nav.contains(e.target)用来判断点击是否发生在导航内部。如果点的是页面其他位置就把所有展开状态清掉——这个交互用户已经形成习惯了不做反而会觉得别扭。Esc 关闭主要服务于键盘用户。键盘用户用 Tab 逐个聚焦链接时focus-within会让菜单自动展开但如果他按下 Esc期望的是退出这个菜单这时候就需要手动清掉.is-open。4.5 第五步窄屏竖排折叠改造窄屏下如果还保留绝对定位的下拉菜单会飞出屏幕所以要改成内联展开——也就是点击之后子菜单在下方原地展开把后面的内容往下推。media (max-width: 768px) { .nav-menu { flex-direction: column; } .sub-menu { position: static; min-width: 0; padding: 0; background: #1a2333; border-radius: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; transition: none; display: none; } .sub-menu::before { display: none; } .nav-item.is-open .sub-menu, .sub-item.is-open .sub-menu { display: block; transform: none; } }关键点是position: static。一旦改成静态定位之前设置的top、left全部失效静态定位元素会忽略偏移属性子菜单就自然回到文档流里跟在父项下方。同时min-width要归零否则在窄屏上会撑出横向滚动条。::before缓冲带在竖排场景下必须display: none因为它是一块 6px 高的绝对定位区域在静态布局里会变成一根奇怪的细线。display: none和display: block之间的切换在这里是允许的因为竖排场景下我们接受瞬间展开不做动画。如果你非要加动画那就得回到max-height的写法但那会引入内容高度算不准的新问题我一般不做。注意断点我选的是 768px这个值没有绝对标准需要看你的导航项数量和文字长度。判断依据是——如果一级菜单在某个宽度下已经挤到两行或者出现横向滚动条那就是该断的点了。别硬套 768。5. 常见问题与排查技巧实录5.1 hover闪断、抖动、穿透的三种成因成因一用了 margin 做间距。这是最常见的。只要一级项和二级菜单之间有 margin 撑开的空隙鼠标经过就会丢失 hover。改成 padding 加伪元素桥问题立刻消失。成因二祖先元素有overflow: hidden或overflow: auto。绝对定位的子菜单会被裁剪掉超出部分。这个坑特别隐蔽因为overflow: hidden往往是为了治浮动或者做圆角裁剪而加的写在三四层之外的外层容器上你盯着导航的 CSS 看半天也找不到原因。排查方法是打开 DevTools从.sub-menu往上逐层点看 Computed 面板里哪一层有overflow值。成因三.sub-menu上有pointer-events: none而展开时忘了改回来。有些人为了做动画在隐藏态设了pointer-events: none但展开态忘了设auto结果菜单看得见点不着。用visibility: hidden其实就够了不需要pointer-events能少用一个属性就少用一个。还有一种抖动是动画本身引起的如果隐藏态和展开态的transform方向相反比如隐藏是translateY(6px)展开写成translateY(-6px)菜单会出现来回弹跳。展开态的transform一律写translate(0, 0)别写反向值。5.2 三级菜单被遮挡或点了没反应按这个顺序查我排查这类问题有一套固定顺序基本三轮之内能定位。第一轮看 z-index 有没有生效。打开 DevTools 选中.sub-menu看 Computed 面板里的z-index值是不是被划掉了。被划掉说明父元素创建了栈上下文往上找transform、filter、will-change、opacity小于 1 的元素。找到之后把这些属性移到.nav-link上。第二轮看是不是被clip-path或overflow剪掉了。在 Elements 面板里把可疑的祖先元素临时取消overflow: hidden如果菜单立刻出现那就找到根源了。解决方式是把裁剪容器改成不裁剪或者把菜单挪出裁剪容器用 JS 计算位置这是最后手段不推荐。第三轮看点击事件有没有被拦截。如果菜单能看见但点不动在控制台里执行document.elementFromPoint(x, y)把菜单项的坐标填进去看返回的是不是那个链接。如果返回的是别的元素比如一个覆盖在上面的空白 div 或者伪元素说明有东西挡住了它。这种情况下检查一下有没有哪个::before忘了设pointer-events。5.3 常见问题速查表现象最可能的原因处理方式鼠标移向子菜单时菜单收起用了 margin 撑间距中间有真空区改用 padding并在.sub-menu::before上补一条透明缓冲带三级菜单被后面的菜单项盖住.sub-menu没设z-index被 DOM 靠后的兄弟项覆盖给.sub-menu设z-index: 30z-index 加到很大仍然被盖住父级.nav-item上有transform等属性创建了栈上下文把transform移到.nav-link或.sub-menu上子菜单完全不显示祖先元素有overflow: hidden逐层排查并去掉裁剪手机上点一次菜单没反应触屏上:hover需要点两次才触发链接用(hover: none)关掉悬停展开改 JS 点击控制收起动画播到一半菜单闪一下display参与切换换成opacity加visibility组合三级菜单飞出屏幕右边固定left: 100%没做方向判断加flip-left类或 JS 计算后翻转键盘 Tab 走到菜单项时不展开只写了:hover没写:focus-within每个悬停选择器都补一个:focus-within版本竖排之后菜单项挤在一起窄屏下min-width没归零在媒体查询里把min-width设为 06. 还能再抠的几个细节6.1 展开方向自适应与视口边界除了三级菜单的左右翻转二级菜单的上下方向在极端情况下也要考虑。比如你的导航栏贴近页面底部某些设计会把主导航放在页脚上方top: 100%会让二级菜单直接跑到视口外面。处理方式是加一个向上展开的修饰类.nav-item.drop-up .sub-menu { top: auto; bottom: 100%; transform: translateY(-6px); } .nav-item.drop-up .sub-menu::before { top: auto; bottom: -6px; }注意隐藏态的transform也要跟着改成负值展开态还是translate(0, 0)这样动画方向和位置才一致。缓冲带的top: auto; bottom: -6px也是必须的否则桥会长在错误的一侧。判断逻辑跟左右翻转一样展开前算一下getBoundingClientRect().bottom和window.innerHeight的关系就行。我一般在打开的时候判断一次不监听滚动因为导航栏本身不会在滚动中移动位置。6.2 性能与可维护性上的小优化性能上能做的其实不多但有两处值得说。一是只过渡opacity和transform这两个属性可以走 GPU 合成不会触发重排。如果你过渡的是top或者height每帧都要重新计算布局菜单一多就会卡。这个原则在做侧边三级树的时候尤其重要因为侧边树的展开会推动后面所有内容。二是**will-change别乱加**。有些人看到提升性能的建议就给所有.sub-menu加上will-change: transform结果页面里十几个菜单同时创建了合成层内存占用直接飙上去反而更卡。我的做法是不加只有在实测发现动画掉帧的时候才给当前悬停的那一项通过 JS 临时加上动画结束再移除。可维护性上我习惯把所有颜色、间距、动画时长抽成 CSS 变量放在.nav上.nav { --nav-bg: #1f2937; --nav-item-hover: #374151; --nav-sub-bg: #273449; --nav-text: #e5e7eb; --nav-radius: 4px; --nav-duration: .18s; --nav-shadow: 0 10px 24px rgba(0, 0, 0, .22); }这样换主题色的时候只改这一处而且改哪几个变量一目了然。这套变量我在三个后台系统里复用过从深色主题切到浅色主题基本就是改五个值的事不用去翻那一百多行定位代码。最后再分享一个我用了很久的小技巧给导航容器加一个调试用的类比如.nav--debug里面写上.nav--debug .sub-menu { opacity: 1; visibility: visible; transform: none; outline: 1px dashed #f00; }。开发阶段把它挂上去所有层级的菜单会同时显示出来并带红色虚线框你能一眼看到每一级的位置、偏移量和缓冲带是否正确比如三级菜单有没有压到二级菜单上、缓冲带的宽度够不够。调完把类删掉就行比来回移动鼠标触发悬停去观察效率高得多。尤其是做左右翻转的时候不这么做你根本没法同时看到两个方向的效果。
