如何用Tailwind CSS实现下拉菜单悬停时Chevron图标从上到下动画

数据老陈

2026-6-30

实现下拉菜单悬停时箭头切换的Tailwind方案

完全可以用Tailwind CSS实现这个箭头从上到下的动画效果，我给你调整代码并说明关键要点：

关键修改点：

清理冗余图标：你代码里同时放了Font Awesome的向下箭头和HTML向上箭头，保留后者即可
给HTML箭头添加inline-block（只有块/行内块元素才能应用transform）
用Tailwind的transition-all实现平滑动画，悬停时通过rotate-180让箭头翻转成向下状态
顺便给子菜单加上默认隐藏、悬停显示的逻辑

修改后的完整代码：

<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.2/css/fontawesome.min.css" rel="stylesheet"/>
<script src="https://cdn.tailwindcss.com/3.3.3"></script>

<li class="mt-0.5 mr-1 text-2xl hover:bg-[#3B4E6A] hover:text-white relative">
  <i class="fa-solid fa-house mr-1 ml-0.5 inline"></i>
  <a href="#" class="text-2xl flex items-center">Tools
    <!-- 仅保留HTML箭头，添加动画相关样式 -->
    <span class="ml-1 inline-block transition-all duration-300">&#8593;</span>
  </a>
  <!-- 子菜单默认隐藏，父元素悬停时显示 -->
  <ul class="text-gray-800 w-full hidden absolute left-0 top-full bg-white shadow-md" id="dropdown-list">
    <li class="leading-8 font-normal hover:bg-slate-200 px-3"><a class="text-2xl" href="#">Item 1</a></li>
    <li class="leading-8 font-normal hover:bg-slate-200 px-3"><a class="text-2xl" href="#">Item 2</a></li>
  </ul>
</li>