子菜单不显示主因是父级未设position: relative导致绝对定位失效；三级菜单需HTML正确嵌套且CSS选择器写全层级；移动端不支持hover，IE需:focus-within兜底。
hover触发时子菜单不显示，检查display和定位是否冲突
常见现象是鼠标悬停后display: block写了，但子菜单还是看不见。根本原因通常是父级没设position: relative，而子菜单用了position: absolute——此时绝对定位会相对于最近的已定位祖先找位置，如果父级没定位，就可能飞到页面外或被遮挡。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 父级
<li>必须加position: relative - 子
<ul>用position: absolute+top: 100%（对齐父菜单底边） - 确保子
<ul>初始状态是display: none，hover时才display: block - 别用
visibility: hidden代替display: none——它仍占布局空间，hover后可能出现跳动
二级菜单能展开，三级菜单点不动？看HTML嵌套和CSS选择器深度
三级菜单失效，90%是因为CSS选择器没写够层级，或者HTML结构里<ul>没正确嵌在二级<li>里。CSS的:hover不会穿透多层，必须显式写出每一级的触发路径。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- HTML结构必须是：
<li><a>一级</a><ul><li><a>二级</a><ul><li><a>三级</a></li></ul></li></ul></li> - CSS要写全：比如
li:hover > ul > li:hover > ul才能控制三级 - 避免用
ul ul ul这种模糊写法——它匹配所有嵌套三层的<ul>，容易误触发 - 移动端不支持hover，这类菜单默认不适用，别指望它在手机上“悬停展开”
菜单展开后文字错位或宽度异常，检查white-space和min-width
子菜单文字换行、宽度塌缩、右边界被截断，往往不是display的问题，而是盒模型细节失控。特别是当菜单项含长英文或数字时，white-space: nowrap没设，内容就会折行撑开容器；或者min-width没限制，导致窄屏下菜单比父项还窄。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 子
<ul>加min-width: 100%，保证至少和父项一样宽 - 子菜单里的
<a>加white-space: nowrap防意外换行 - 避免给
<ul>设width: 100%——它会继承父<li>的padding，实际变宽 - 如果父项有
text-align: center，子菜单也会继承，需重置为text-align: left
IE11或旧版Edge下hover延迟/失效，优先用:focus-within兜底
老浏览器对:hover在非<a>元素上的支持不稳定，尤其是动态插入的菜单或复杂嵌套时。纯CSS方案在这里容易翻车，但不用JS也能缓解。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给一级
<li>同时写:hover和:focus-within，后者在键盘焦点进入子项时也生效 -
tabindex="0"加到可聚焦的菜单触发元素（如<button>或带role="menuitem"的<div>） - 别依赖
pointer-events: none做隐藏——IE11不支持该属性在:hover中切换 - 如果必须兼容IE10及更早，只能上JS监听
mouseenter/mouseleave，CSS方案到此为止
hover类菜单看着简单，真正卡住人的从来不是display切换，而是定位脱离文档流后和父容器的尺寸博弈、浏览器对伪类的支持断层、还有移动端完全绕不开的交互逻辑缺失——这些地方一松劲，菜单就飘了或者点不了。
