CSS - 在 wordpress 网站上下拉菜单时将图标动画化为 'rotate'

CSS - animate icon to 'rotate' upon the dropdown of a menu on wordpress site

我有一个 wordpress 网站，http://watershedgeo.staging.wpengine.com/#，我正在使用一个主题，它内置在导航菜单中。

我已将其修改为在具有下拉项的菜单项之后使用超棒的字体图标。我使用的是直角，>，但我想使用插件或 css 对其进行动画处理，以便当下拉菜单出现时，图标会旋转到 'V'.

我不想在其中构建任何 JS，我知道可以用 CSS 来完成我只是不确定最好的方法是否也适用于可湿性粉剂环境。

当前 CSS:

.fusion-megamenu-icon {
display: inline;
margin-left: 12px;
float: right;
}


.fusion-megamenu-icon:hover {
transform: rotate(90deg);
}

在您的代码中添加一些自定义 CSS

试试这个

CSS

ul.fusion-menu > li.menu-item-has-children:hover a i.fa{
  transform:rotate(90deg);
}