我需要帮助。我有一个主按钮，它有一个向下的箭头，表示有一个下拉菜单。悬停时，下拉菜单出现，箭头旋转并指向上。但是，当我悬停在下拉菜单项上时，它应该保持指向上。有人能帮助我的代码吗？提前感谢您。
请参见CodePen. https://codepen.io/denzdoneza/pen/ZEjddQp上的代码链接
超文本：

<a href="#" class="mainButton">
  <button>Resources<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 24 14.1" style="enable-background:new 0 0 24 14.1;" xml:space="preserve">
<path d="M12,14.1L0,2.1L2.1,0L12,9.9L21.8,0L24,2.2L12,14.1z"/>
</svg></button>
</a>
<div class="dropdown">
  <a href="#"><button>Blackpaper</button></a>
  <a href="#"><button>Whitepaper</button></a>
</div>

CSS：

button {
  width: 256px;
  height: 52px;
  font-size: 16px;
  background-color: #cd0d0d;
  color: #ffffff;
}
a button svg {
  fill: #ffffff;
  position: absolute;
  width: 12px;
  margin: 6px 0 0 8px;
  transform: rotate(0deg) translateX(0px) translateY(0px);
  transition: transform 0.2s linear;
}
.dropdown {
  display: none;
}
button:hover {
  background-color: #8e0000;
}
a.mainButton:hover ~ .dropdown {
  display: flex;
  flex-direction: column;
}
a.mainButton:hover svg {
  transform: rotate(180deg) translateX(0px) translateY(0px);
  transition: transform 0.2s linear;
}
.dropdown:hover {
  display: flex;
  flex-direction: column;
}
.dropdown:hover ~ a.mainButton button svg {
  transform: rotate(180deg) translateX(0px) translateY(0px) !important;
  transition: transform 0.2s linear;
}

我尝试了一个CSS：悬停在下拉列表的容器上，然后使用~指向箭头，但它不起作用。
CSS：

.dropdown:hover ~ a.mainButton button svg {
  transform: rotate(180deg) translateX(0px) translateY(0px) !important;
  transition: transform 0.2s linear;
}