如何为下拉菜单添加平滑下滑过渡效果？

你当前的代码没法实现平滑过渡，核心问题是**display: none/block属性不支持CSS过渡动画**，得换用max-height来控制显示隐藏，配合overflow: hidden实现下滑效果。

修改后的CSS代码如下：

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  position: relative;
  min-width: 160px;
  z-index: 1;
  clear: both;
  width: 100%;
  overflow: hidden;
  text-align: center;
  max-height: 0; /* 初始状态高度为0，隐藏内容 */
  transition: max-height 0.4s ease; /* 对max-height属性应用过渡 */
  /* 可根据需求添加背景、边框等样式 */
}

.dropdown:hover .dropdown-content {
  max-height: 500px; /* 设置足够容纳内容的最大高度，按需调整 */
}

关键说明： #

• 去掉了display: none，改用max-height: 0隐藏内容，同时overflow: hidden截断超出部分
• 鼠标悬停时将max-height设为一个远大于内容实际高度的值（比如500px），触发平滑过渡
• 移除了无效的transition-property: dropdown-content，过渡目标要指定具体CSS属性（这里是max-height）

你的JSX结构不需要改动，只要替换上述CSS即可实现平滑下滑效果。

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