如何用CSS实现下拉菜单丝滑展开而不挤压内容
使用 position: absolute 配合 max-height 或 grid-template-rows 动画可以实现不挤压内容的丝滑展开。核心做法是让下拉菜单脱离文档流，通过改变其高度属性来触发动画，从而避免影响周围元素的布局。
为什么传统 height 动画会挤压内容
传统方法直接对 height 从 0 到 auto 进行过渡，浏览器无法计算中间状态，导致动画失效或瞬间跳变。若强行指定固定高度，则无法适应内容变化。此外，若在文档流中展开，必然推挤下方元素。
.dropdown { position: relative; display: inline-block; } .menu { position: absolute; top: 100%; left: 0; background: #fff; border: 1px solid #ccc; overflow: hidden; max-height: 0; transition: max-height 0.3s ease-out; } .dropdown:hover .menu { max-height: 500px; /* 足够大的值 */ }如何使用 Grid 布局实现更优雅的动画
利用 CSS Grid 的 grid-template-rows 属性，可以从 0fr 过渡到 1fr，完美支持 auto 高度的平滑动画，且无需预设最大高度。
立即学习“前端免费学习笔记（深入）”；
.menu-grid { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease-out; } .menu-grid > div { overflow: hidden; } .dropdown:hover .menu-grid { grid-template-rows: 1fr; } 
