如何在HTML和CSS中实现hover时>符号向下旋转（可口可乐网站复刻）

要实现鼠标悬停时箭头向下旋转的效果，需要把箭头单独封装成可控制的元素，再通过CSS的transform和transition实现动画。以下是修改后的完整代码：

修改后的HTML #

<!DOCTYPE html>
<!-- Navigation bar buttons-->

<!-- allows CSS to style the entire list-->
<div class="navtopbar">
  <ul>
    <li><a><img src="" width="" height="20"></a></li>
    <li><a href="placeholder">Brands</a></li>
    <li><a href="placeholder">Discover <span class="dropdown-arrow">></span></a>
      <ul>
        <li><a href="placeholder">Coca Cola App</a></li>
        <li><a href="placeholder">Coke Creations</a></li>
        <li><a href="placeholder">Fanta Halloween</a></li>
        <li><a href="placeholder">Coca Cola Football Promotion</a></li>
        <li><a href="placeholder">Sprite Heat Hacks</a></li>
        <li><a href="placeholder">Diet Coke What you Love</a></li>
      </ul>
    </li>
    <li><a href="placeholder">Impact <span class="dropdown-arrow">></span></a>
      <ul>
        <li><a href="placeholder">Sustainability</a></li>
        <li><a href="placeholder">Social</a></li>
      </ul>
    </li>
  </ul>
</div>

修改后的CSS #

html {
  height: 100%;
  width: 100%;
}

.navtopbar {
  background-color: white;
  position: relative;
  z-index: 999;
}

.navtopbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background: white;
}

.navtopbar li {
  display: inline-block;
  position: relative; /* 为子菜单定位提供基准 */
}

.navtopbar li a {
  color: black;
  display: block; /* 修正原代码笔误 */
  padding: 10px 20px;
  text-decoration: none;
}

/* 下拉箭头基础样式 */
.dropdown-arrow {
  display: inline-block;
  margin-left: 4px;
  transition: transform 0.3s ease; /* 添加平滑过渡动画 */
}

.navtopbar ul ul {
  position: absolute;
  top: 100%;
  left: 0; /* 子菜单对齐父元素左侧 */
  display: none;
  background: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 可选：增强视觉层次 */
}

.navtopbar ul ul li {
  display: block;
  white-space: nowrap; /* 防止子菜单文字换行 */
}

.navtopbar li:hover ul {
  display: block;
}

/* 鼠标悬停时箭头旋转 */
.navtopbar li:hover .dropdown-arrow {
  transform: rotate(90deg);
}

.navtopbar ul ul li a:hover {
  font-weight: bold;
}

.navtopbar a {
  text-decoration: none;
  color: black;
  font-size: 15px;
}

关键修改说明 #

1. 单独封装箭头：把原文本中的>放入<span class="dropdown-arrow">，实现对箭头的独立样式控制。
2. 添加过渡动画：给箭头设置transition属性，让旋转效果平滑自然。
3. 悬停触发旋转：通过父级li的hover状态，控制箭头旋转90度，从向右变为向下。
4. 修复代码错误：修正原CSS中display: black的笔误为display: block。
5. 优化子菜单：添加position: relative和left: 0避免子菜单错位，用white-space: nowrap防止文字换行。

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