二级菜单在Chrome中不显示求助：overflow设为auto时的跨浏览器差异

这个问题我之前踩过类似的坑，本质是Chrome和Firefox对fixed定位元素的overflow裁剪规则处理不一致导致的：

问题原因 #

当你的父菜单同时设置了position: fixed和overflow: auto时：

• Chrome会把这个fixed定位的父元素直接认定为“裁剪容器”——不管子菜单的z-index设置多高，只要子元素超出父菜单的max-height范围，就会被强制裁剪隐藏；
• 而Firefox的处理逻辑更灵活：如果子菜单是absolute或fixed定位的，它允许这类子元素突破父元素的overflow限制，正常显示在父元素外部。

可行的解决方案 #

方案1：替换父菜单的定位方式（推荐）

如果业务允许，把父菜单的position: fixed改成position: absolute，同时给它的直接父容器加上position: relative。这样overflow:auto只会裁剪非定位的子元素，而absolute定位的子菜单就能正常突破父元素的范围显示。

修改后的父菜单CSS：

display: inline-block; 
position: absolute; /* 替换原来的fixed */
max-height: 100px; 
overflow: auto; 
visibility: hidden; 
font-size: 12px; 
list-style-type: none; 
padding: 5px 0; 
background: #EFEFEF; 
border: 1px solid #B2B2B2; 
border-radius: 6px; 
z-index: 9999;

同时给父菜单的父容器添加：

position: relative;

方案2：单独设置子菜单的fixed定位

如果必须保留父菜单的position: fixed，可以把子菜单的定位也改成position: fixed，然后通过JavaScript或者CSS计算子菜单的位置（基于父菜单的坐标），让它脱离父菜单的裁剪范围。

方案3：调整父菜单尺寸（仅适用于特定场景）

如果子菜单的尺寸不大，可以尝试调大父菜单的max-height，让子菜单完全包含在父菜单的可视范围内，这样overflow:auto的滚动条只会在父菜单内容过多时出现，子菜单也能正常显示。

额外提示 #

如果你的子菜单是通过JS控制显示/隐藏的，注意同步调整子菜单的定位逻辑，确保它的位置计算不依赖父菜单的fixed定位属性，避免出现偏移问题。

内容的提问来源于stack exchange，提问作者user2144555