css二级菜单的隐藏与显示

CSS二级菜单的菜单藏显隐藏与显示，核心就一句话：用display:none藏起来，菜单藏显用:hover或:focus-within在特定条件下再把它放出来。菜单藏显就这么简单，菜单藏显但很多人写出来的菜单藏显菜单要么闪个不停，要么点不到子项——问题往往出在“间隙”上。菜单藏显

先看最常见的菜单藏显写法。父级li设position:relative，菜单藏显子菜单ul绝对定位在下方，菜单藏显默认display:none。菜单藏显鼠标悬停父级时，菜单藏显改成display:block。菜单藏显听起来没毛病，菜单藏显但如果你在父级和子菜单之间留了哪怕2像素的菜单藏显空白，鼠标一挪过去，菜单藏显子菜单立刻消失。因为hover状态没了，display又变回none。这不是玄学，是CSS的display根本不参与过渡，它只有“有”和“没有”两种状态。

有人用visibility:hidden配合opacity:0来做平滑过渡。这思路对，但注意visibility虽然可以过渡，延迟却得手动控制。比如子菜单要渐显，你得写transition: visibility 0s linear 0.2s, opacity 0.2s——隐藏时延迟0.2秒再切visibility，不然元素虽然看不见，却还占着点击区域，可能挡住别的内容。我见过有人在这上面调了半天，最后发现是没加延迟，子菜单“隐形但存在”，把旁边的按钮全挡住了。

还有个坑是hover范围。你只对父级li设:hover，那鼠标从父级右下角斜着滑进子菜单时，路径上若有几像素不属于任何元素，就会触发“悬停丢失”。解决办法很简单：把子菜单的top值设成父级高度的100%，并且加个透明的“桥”——比如padding-top: 10px，或者干脆用::before伪元素盖住间隙。我习惯给子菜单加top: 100%，然后父级li的padding-bottom留出空间，这样鼠标移动时始终在li的范围内，就不会断。

移动端是另一回事。hover在触摸屏上根本不存在，第一次点击会触发:hover，但第二次点击又不会取消——这让很多新手抓狂。替代方案是用:focus-within，把tabindex="0"加到父级li上，这样点击或键盘Tab都能展开。不过:focus-within有个副作用：点击子菜单里的链接后，焦点还在子菜单里，菜单不会自动收回去。你得在链接上注册blur事件，或者用JavaScript监听点击外部区域。

纯CSS方案能做到这个程度已经不错了。真要精细控制，比如“鼠标离开整个菜单区域后延迟300毫秒再收起”，那得用JS记mouseenter和mouseleave时间戳，加个setTimeout。但别过度设计——大多数场景下，:hover加:focus-within双管齐下，已经能覆盖鼠标和键盘用户。我见过有人为了一个二级菜单引了整条jQuery，其实没必要的。

最后说个细节：子菜单的z-index一定要设，不然会被后面内容的背景盖住。设个z-index: 99，别贪大，不然可能盖住弹窗。还有，子菜单的white-space: nowrap加上，防止文字换行把宽度撑得乱七八糟。这些不是理论，是我真在项目里踩过的坑。写代码就是这样，看起来越简单的东西，边界情况越多。