下拉菜单高度被截断或无法撑开，根本原因是父级.dropdown元素设置了height或min-height；应移除.height、min-height和overflow-y，让容器自适应内容，并将max-height和overflow-y设在ul上。
下拉菜单高度被截断或无法撑开？检查 .dropdown 容器的 height/min-height
常见现象是鼠标悬停后子菜单只显示几行、底部被裁切，或根本“不弹出来”。根本原因往往是父级 .dropdown 元素写了 height 或 min-height，强行锁死高度，导致内部 ul 即使设了 max-height 也无处伸展。
正确做法是彻底移除 .dropdown 上的 height、min-height 和 overflow-y —— 这些属性会覆盖浏览器默认的“内容自适应”行为。让容器靠内容自然撑高，再把滚动控制权交给子列表。
- ✅ 做：
.dropdown { width: 100%; background-color: blue; }（仅保留布局相关属性） - ❌ 不做：
.dropdown { height: 200px; overflow-y: hidden; } - ⚠️ 注意：
.dropdown ul的height: 100%是安全的，因为父容器没写死高度，100% 实际解析为auto，不影响内容计算
子菜单需要滚动但不生效？确认 max-height 和 overflow-y 在 ul 上
滚动必须作用在真正承载菜单项的容器上，也就是 ul 元素本身。很多人误把 overflow-y: auto 加在 .dropdown 上，结果滚动条出不来，或者整个导航栏跟着滚。
max-height 要设合理值：太小（如 60px）会立刻触发滚动但遮挡内容；太大（如 500px）又失去约束意义。推荐用 calc(5 * 36px) 或 200px，兼顾可读性与空间控制。
- ✅ 做：
.dropdown ul { overflow-y: auto; max-height: 200px; margin: 0; padding: 0; } - ❌ 不做：
.dropdown { overflow-y: auto; max-height: 200px; } - ? 提示：如果菜单项含图标或行高较大，用
line-height或padding统一高度，避免max-height计算偏差
JavaScript 强制重设高度反而破坏自适应？别碰 el.style.height
遇到“菜单展开后高度没更新”，第一反应写 el.style.height = 'auto' 或 el.offsetHeight 触发重排 —— 这会覆盖 CSS 的 max-height 和 overflow，导致滚动失效、动画卡顿，甚至在 Safari 中完全失灵。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
现代 CSS 已能原生响应内容变化。只要结构干净、没有固定高度干扰，:hover 或 .active 切换时，ul 会自动按子项数量伸缩，max-height 也会实时生效。
- ✅ 做：用
transform: scaleY(1)+transition做展开动画，不碰 height - ❌ 不做：
el.style.height = el.scrollHeight + 'px'; - ⚠️ 特别注意：jQuery 的
.height('auto')同样危险，本质还是内联 style 覆盖
嵌套下拉菜单高度错乱？避免对 .sub-1 设置固定 height
二级菜单（如 .sub-1）若用了 height: 55px 这类固定值，当它内部再展开 .sub-2 时，父级高度不会增长，后续同级菜单项（如 .last-link）就会叠在上面，视觉错位。
解决方式极简：把所有子菜单的 height 改成 auto，让它们随内容自然伸展。配合 max-height + overflow-y: auto 控制单层滚动即可。
- ✅ 做：
.sub-1.active { height: auto; } - ❌ 不做：
.sub-1.active { height: 55px; } - ? 补充：若需动画，用
max-height过渡（如从0→300px），而非height
实际调试时最容易忽略的是父容器的显式高度限制和 JavaScript 对内联样式的粗暴干预。这两点一旦存在，CSS 的自适应逻辑就直接失效，再调 max-height 也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
