I'm working on customizing a Wordpress menu that has a submenu. I managed to add an arrow to the 'li' element that contains a submenu, and created a hover animation with CSS when the mouse moves over the 'a' tag inside the 'li'. Now, I want to extend this animation to include the arrow, which is inside a 'span' element within the 'a' tag, using jQuery.
$('nav ul li.menu-item-has-children').hover(function() {
$('nav ul li a span.arrow').css('color', '#fff');
}, function() {
$('nav ul li a span.arrow').css('color', '#be1722');
});
However, I encountered an issue where the arrow remains white when the submenu is opened and the mouse hovers over it. How can I resolve this?
This is the structure of my menu:
<nav>
<li class="menu-item-has-children">
<a>Menu item with sub menu</a><span class="arrow">arrow</span>
<ul>
<li>
<a>Sub menu link</a>
</li>
</ul>
</li>
</nav>
I also tried the following solution:
$('nav ul li.menu-item-has-children a').hover(function() {
$('nav ul li a span.arrow').css('color', '#fff');
}, function() {
$('nav ul li a span.arrow').css('color', '#be1722');
});
But whenever I hover over an 'a' tag in the submenu, the function restarts and the arrow turns white again. Can anyone provide assistance?