CSS-在wordpress站点上下拉菜单时，将图标动画化为“旋转”

Question

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

我已经修改了它，在有下拉项的菜单项之后使用字体可怕的图标。我用的是直角，

我不想构建任何JS到这个，我知道它可以用CSS完成，我只是不确定最好的方法来做到这一点，也可以在WP环境中很好地工作。

当前CSS：

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


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

Answer 1

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

试试这个

CSS

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