Javascript navigation menu is blinking

Question

I have a navigation menu with sublinks. When I put my mouse on a link who have sublinks, it is blinking when moving my mouse over the links.

Illustration of my problem :

https://i.ibb.co/g684pXt/illustr.gif

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>

It works but the navigation is not fluid, not good because of when I move the mouse in the submenu, the submenu is blinking between each link.

Any help, please! Thanks!

Answer 1

I would ditch javascript and go with pure CSS. :focus selects the element when you clicking on it, and x + y means "select y if it's directly following x".

button:focus + div {
  display: flex;
}

button + div {
  display: none;
  flex-direction: column;
}

/* ALL DECORATION BELOW AND NOT RELEVANT TO THE ISSUE */
button + div {
  padding: 0.5rem 0px;
  background: pink;
}

button + div > a {
  padding: 0.5rem;
}

button + div > a:hover {
  background: rgba(0, 0, 0, 0.13);
}

<div class="d_1">
  <button href="{{ route('vpn.index') }}" class="d_btn">{{__('header.Meilleurs-VPN')}} <i class="fa fa-angle-down"></i></button>
  <div id="myDropdown1" class="d_content d_mobile_1">

    <a href="{{ route('vpn.index') }}">Tous les VPN</a>

    <a href="{{ route('vpn.windows') }}">Windows</a>
  </div>
</div>