CSS - ワードプレスサイトのメニューのドロップダウン時にアイコンを回転させるアイコンを

Question

私はワードプレスサイトhttp://watershedgeo.staging.wpengine.com/#を持っています。テーマを使用していて、それはナビゲーションメニューに組み込まれています。

私はドロップダウンアイテムを持つメニュー項目の後にフォントのすばらしいアイコンを使用するように変更しました。私は直角を使用しています>、しかし、プラグインまたはCSSを使用してアニメーションを作成したいので、ドロップダウンが下がったときにアイコンが 'V'に回転します。

私はこれに任意のJSを構築する必要はないと私はそれがCSSで行うことができることを知っている私はWP環境でもうまく動作するこれを行うための最善の方法を確信していません。

現在のCSS：

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


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

Answer 1

この

CSS

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