Dropdown menu with Propagation problem

Question

Could someone help me understand why by clicking on menu options, sometimes the container loses the Hover and closes the container?

Below follows my code:

<style>
    ul.nav-menu__consultora,
ul.nav-menu__consultora ul{
    padding: 0;
    margin: 0;
    position: relative;
}
ul.nav-menu__consultora ul li{
    padding: 5px;       
}
.nav-menu__consultora{   
    cursor: pointer;
}
.menu__consultor,
.opcao--queiro-consultor-type,
.opcao--soy-consultor-type{
    display: none;
}
.option-consultor:hover .menu__consultor,
.open{
    display: block;
}
.nav-menu__consultora li {
    list-style: none;
}
</style>
<nav class="menu-header__consultora">
    <ul class="nav-menu__consultora">
        <li class="option-consultor">Consultor(a)
            <ul class="menu__consultor">
                <li class="opcao--queiro-consultor opcao--consultor">Quiero ser Consultor(a)
                    <ul class="opcao--queiro-consultor-type opcao-type">
                        <li>Digital</li>
                        <li>Presencial</li>
                    </ul>
                </li>
                <li class="opcao--soy-consultor opcao--consultor"> Soy Consultor(a)
                    <ul class="opcao--soy-consultor-type opcao-type">
                        <li>Digital</li>
                        <li>Presencial</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</nav>

<script>
    var opcoesConsultor = document.querySelectorAll('.opcao--consultor');
    var opcoesType = document.querySelectorAll('.opcao-type');

    opcoesConsultor.forEach(function(opcao, i){
        opcao.addEventListener('click', function(e){
            opcoesType[i].classList.toggle('open');
        })
    })
</script>

Answer 1

I suggest first creating a flag (variable to control) and create a new event click to the menu .menu__consultor to change the flag value. The menu will only close when the flag is false. By clicking on the menu options, the flag flips true and then false again. This way, the menu will not be closed in the click because the if in the mouseout will not allow it. That’s because the event mouseout is called when you click the menu.

Behold:

var opcoesConsultor = document.querySelectorAll('.opcao--consultor');
var opcoesType = document.querySelectorAll('.opcao-type');
var menu = document.querySelector('.menu__consultor');
var flag = false; // flag

opcoesConsultor.forEach(function(opcao, i){
  opcao.addEventListener('click', function(e){
      opcoesType[i].classList.toggle('open');
      menu.classList.add('open');
  })
  opcao.addEventListener('mouseover', function(){
      menu.classList.add('open');
      flag = false;
  })
})

opcoesType.forEach(function(type, i){
  type.addEventListener('mouseover', function(){
      menu.classList.add('open');
      flag = false;
  })
})

menu.addEventListener("mouseout", function(){
   if(!flag) menu.classList.remove('open');
})

// eventos adicionados
menu.addEventListener("click", function(){
   flag = true;
})

menu.addEventListener("mousemove", function(){
   flag = false;
})

ul.nav-menu__consultora,
ul.nav-menu__consultora ul{
  padding: 0;
  margin: 0;
}
ul.nav-menu__consultora ul li{
  padding: 5px;
  display: block;
}
.nav-menu__consultora{   
  cursor: pointer;
}
.menu__consultor,
.opcao--queiro-consultor-type,
.opcao--soy-consultor-type{
  display: none;
  background: red; /* fundo vermelho apenas para ilustrar */
}
.option-consultor:hover .menu__consultor{
  display: block;
}
.open{
  display: block;
}

<nav class="menu-header__consultora">
    <ul class="nav-menu__consultora">
        <li class="option-consultor">Consultor(a)
            <ul class="menu__consultor">
                <li class="opcao--queiro-consultor opcao--consultor">Quiero ser Consultor(a)
                    <ul class="opcao--queiro-consultor-type opcao-type">
                        <li>Digital</li>
                        <li>Presencial</li>
                    </ul>
                </li>
                <li class="opcao--soy-consultor opcao--consultor"> Soy Consultor(a)
                    <ul class="opcao--soy-consultor-type opcao-type">
                        <li>Digital</li>
                        <li>Presencial</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</nav>