响应式菜单移动端汉堡视图下拉CSS max-height过渡失效求助

问题分析 #

你用max-height:0+overflow:hidden配合类切换实现下拉菜单过渡，桌面端正常但移动端失效，核心原因大概率是：

• 移动端的下拉菜单元素未正确继承过渡属性，或者过渡属性仅在桌面端断点中定义
• 用max-height:800%作为展开值，移动端父元素高度不确定，百分比计算异常，导致过渡无法平滑触发

具体修复步骤 #

1. 全局设置过渡属性 #

将transition属性放到通用的.dropdown-content样式中，确保移动端和桌面端都能继承：

.dropdown-content {
  max-height: 0;
  overflow: hidden;
  /* 明确过渡属性，时长可根据需求调整 */
  transition: max-height 0.3s ease-in-out;
  /* 其他基础样式 */
}

2. 替换百分比max-height为固定值 #

放弃800%这种百分比取值，改用足够覆盖菜单最大高度的固定值（比如1000px），避免父元素高度不确定导致的计算错误：

.dropdown-content.active {
  max-height: 1000px;
}

3. 检查移动端样式冲突 #

确保移动端断点（比如max-width:767px）中，没有覆盖.dropdown-content的max-height、overflow或transition属性，比如不要在移动端设置display:none或其他会打断过渡的样式。

4. 验证JS逻辑 #

确认点击汉堡按钮时，正确给目标下拉菜单添加/移除active类，且点击外部区域移除类的逻辑能覆盖移动端场景，没有遗漏元素选择器。

补充说明 #

因为要兼容老网站，避免引入Bootstrap等框架是正确的选择，上述修改仅调整核心的过渡相关CSS，不会影响原有老页面的布局。

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