能否无需JavaScript实现滑出式下拉菜单（Dropdown）？

当然有可行的方案！你遇到的固定高度/百分比硬编码问题，其实可以通过CSS Grid布局完美解决——它能让下拉内容自适应高度，同时保持平滑的滑出过渡效果，完全不需要JavaScript或者硬编码高度值。

核心思路 #

利用CSS Grid的grid-template-rows属性，将下拉菜单拆分为两行：

1. 标题行：高度自动匹配标题内容
2. 内容行：初始设为0fr（完全折叠，高度压缩为0），hover时切换为1fr（自动撑满下拉内容的实际高度）
   配合transition属性实现平滑的高度变化，彻底避开固定高度的限制。

完整实现代码 #

.dropdown_menu {
  display: grid;
  grid-template-rows: auto 0fr;
  transition: grid-template-rows 0.3s ease;
  font-family: Arial;
  position: relative;
  display: inline-block;
}

.dropdown_title {
  background-color: #505050;
  color: white;
  margin: 0;
  padding: 20px 50px;
  cursor: pointer; /* 给用户可交互的视觉提示 */
}

.dropdown_content {
  background-color: #646464;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.dropdown_content > * {
  color: white;
  padding: 20px 0;
  text-align: center;
  text-decoration: none;
}

.dropdown_content > *:hover {
  background-color: #7D7D7D;
}

/* hover时展开内容行 */
.dropdown_menu:hover {
  grid-template-rows: auto 1fr;
}

<div class="dropdown_menu">
  <p class="dropdown_title">Dropdown</p>
  <div class="dropdown_content">
    <a href="">Option 1</a>
    <a href="">Option 2</a>
    <a href="">Option 3</a>
  </div>
</div>

这个方案的优势 #

• 高度完全自适应：不管下拉项增加或减少，内容行都会自动匹配实际高度，不用手动计算百分比或固定值
• 过渡流畅自然：grid-template-rows的过渡动画和你原来的height过渡一样平滑
• 无JavaScript依赖：纯CSS实现，现代浏览器都完美支持Grid布局

兼容旧浏览器的备选方案 #

如果需要兼容更老的浏览器，也可以用max-height结合fit-content()的方案，只是需要注意过渡时长的调整（避免动画延迟）：

.dropdown_content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.dropdown_menu:hover .dropdown_content {
  max-height: fit-content;
}

不过这个方案在部分旧浏览器中对fit-content的支持有限，所以Grid方案是更推荐的现代解决方案。

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