I'm trying to create an arrow on my header that, when you hover over to select something, shows an arrow that rotates 180 degrees, and stays rotated until you leave the dropdown menu. The issue with my current code is that it rotates how I want when you hover over the navigation header title, but when you go to select something from the menu, it rotates back to its original position. Here is what I have currently.
Is there a way to make it so the arrow stays rotated when I'm hovering over the entire dropdown menu section?
.header-nav-folder-title:after {
content: '\F107';
font-family: FontAwesome;
display: inline-block;
padding-left: 4px;
padding-right: 6px;
padding-top: 3px;
transform:rotate(180deg)};
.header-nav-folder-title:hover::after{
transform:rotate(0deg)};
The website is currently shareable with password, if you need access beyond the code, message me and I'll send it to you.
Thanks!
