我有一个BS4下拉元素，我正在动画切换右侧的小插入符号。 到目前为止，这工作得很好，但只有当鼠标悬停在下拉项时。 当我悬停在子菜单项上时，插入符号会向后旋转。 在鼠标离开下拉菜单和下拉菜单之前，这不应该发生。

null

html {
  font-family: Arial;
  font-size: 1.4rem;
  line-height: 1.4rem;
}
.dropdown {
  display: inline-block;
  padding: 0 7px;
}
  .dropdown.show {
    background-color: rgba(255, 255, 255, 0.9);
  }

 .dropdown a::before {
   content: "";
 }

 .dropdown a.dropdown-toggle {
      cursor: pointer;
      padding: 3px 7px;
}

.dropdown a.dropdown-toggle::after {
  font-size: 1.4rem;
  content: ">";
  color: Orange;
  line-height: 1.4rem;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  vertical-align: middle;
  transition: 0.5s;
}

.dropdown a.dropdown-toggle:hover::after {
  transform: rotate(90deg);
}
    
.dropdown .dropdown-menu {
  min-width: initial;
  padding: 0.5rem;
  margin: 0;
  margin-left: 7px;
  font-size: initial;
  border-radius: 0;
  transition: all 0.5s;
  overflow: hidden;
  transform-origin: top center;
  transform: scale(1,0);
  display: block;
  border: none;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}
a.dropdown-item {
  font-size: 1.6rem;
  line-height: 2.9rem;
  text-decoration: none;
}
a.dropdown-item:hover {
  color: Orange;
}

.dropdown:hover .dropdown-toggle {
    background-color: rgba(255, 255, 255, 0.9);
}

.dropdown:hover .dropdown-menu {
  transform: scale(1);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>

<div class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown">
    MAIN
  </a>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Sub1</a><br/>
    <a class="dropdown-item" href="#">Sub2</a><br/>
    <a class="dropdown-item" href="#">Sub3</a>
  </div>
</div>

null

由于未知的原因，这个包含的片段中的动画旋转不起作用，我也准备了一个代码页。 这里可以看到循环:https://codepen.io/schweizerschoggi/pen/grozyqv

我希望保持旋转的插入符号，只要鼠标位置在下拉菜单或下拉菜单上。