如何实现元素平滑展开？hover触发li类div时深层li>span文本平滑展开

要实现鼠标悬停在.li类的div上时，最深层级的li>span文本平滑展开，你需要调整CSS的过渡逻辑——display:none/block无法触发过渡动画，同时要针对目标span设置专属的展开过渡规则。

修改后的完整代码 #

HTML（结构无需改动）

<div class="kinds">
  <ul class="drop_vert_menu">
    <li>
      <div class="li"><span>text that expands</span>
        <ul>
          <li><span>text that should be expanded</span></li>
        </ul>
      </div>
    </li>
  </ul>
</div>

CSS

ul {
  list-style-type: none;
}

.kinds {
  width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.drop_vert_menu {
  text-align: center;
  width: 600px;
  margin: 0;
  padding: 0;
}

/* 替换display:none为可过渡属性，实现菜单平滑展开 */
.drop_vert_menu li ul {
  list-style-type: none;
  width: 600px;
  padding: 0;
  background-color: #666;
  position: relative;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.drop_vert_menu>li {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  padding: 10px 0px;
}

/* 改为悬停在.li类div上触发菜单展开 */
.drop_vert_menu .li:hover ul {
  max-height: 100px; /* 设置足够容纳内容的高度 */
}

.drop_vert_menu li ul li {
  text-align: center;
  padding: 8px 0px;
}

/* 给最深层级span设置初始隐藏状态 */
.drop_vert_menu li ul li span {
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 0.3s ease;
  color: #fff; /* 适配深色背景的文字颜色 */
}

/* 悬停时触发span平滑展开 */
.drop_vert_menu .li:hover ul li span {
  max-width: 200px; /* 设置足够容纳文本的宽度，也可使用fit-content（需浏览器支持） */
}

关键修改说明 #

• 菜单过渡逻辑：用max-height替代display:none，配合transition实现菜单的平滑展开/收起——display属性无法触发CSS过渡动画。
• 文本展开控制：给目标span设置max-width:0和overflow:hidden隐藏文本，悬停时将max-width设为足够容纳文本的值，通过transition实现平滑展开；white-space:nowrap保证文本不换行，避免影响展开效果。
• 触发范围调整：将hover触发源从外层li改为.li类的div，完全匹配需求中“悬停在带有li类的div元素上”的要求。

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