I'm experiencing an issue with my navigation menu that has sublinks. Whenever I hover over a link with sublinks, it starts blinking as I move my mouse across the links.
Here is an illustration of the problem:
function myFunction(i) {
document.getElementById("myDropdown" + i).classList.toggle("show");
}
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function yourFunction(i) {
document.getElementById("myDropdown" + i).classList.toggle("show");
document.getElementById("myDropdown" + i).children.classList.remove("show");
}<li class="active"><a href="{{ route('comparateur') }}">{{__('header.Comparer')}}</a></li>
<div class="d_1">
<button href="{{ route('vpn.index') }}" onmouseover="myFunction(1)" class="d_btn">{{__('header.Meilleurs-VPN')}} <i class="fa fa-angle-down"></i></button>
<div id="myDropdown1" onmouseout="yourFunction(1)" class="d_content d_mobile_1">
<a href="{{ route('vpn.index') }}">Tous les VPN</a>
<a href="{{ route('vpn.windows') }}">Windows</a>
<a href="{{ route('vpn.ios') }}">{{__('header.Mac')}}</a>
<a href="{{ route('vpn.linux') }}">{{__('header.Linux')}}</a>
<a href="{{ route('vpn.android') }}">{{__('header.Android')}}</a>
<a href="{{ route('vpn.netflix') }}">{{__('header.Netflix')}}</a>
</div>
</div>The current setup works but the navigation feels clunky and unpleasant due to the submenu blinking between each link when moving the mouse within it.
If anyone could offer some guidance or assistance, I would greatly appreciate it! Thank you!