Hover over menu and display submenus

Question

I’m having the following problem in my system.

I put a css in the menus, where I pass the mouse over the menus and displays the submenus linked to them.

CSS

ul.nav li.dropdown:hover
{ 
    background-color: #0c7cd5;
}

ul.nav li.dropdown:hover ul.dropdown-menu
{ 
    display: block; 
}

my problem is this, when I click on a submenu it gets fixed, however when I move the mouse on another menu, it displays but does not hide in which I clicked, follows the image below:

Someone could help me ?

Answer 1

you can use JQUERY on focusout, on focusin or Blur with the following function :

   $("#id-do-componente").on("focusout",function() {

          $('#id-do-componente-a-remover').addClass("id-da-classe");

    }

That is when your main component loses its focus that would be the center you will add the class referring to the formatting that hides it. You can create in CSS for example and apply in the div class a class.

<div class="menu-remove">
</div>

in css :

.menu-remove{
  display:none
}

in which case our jquery function would be :

$("#id-do-componente").on("focusout",function() {

              $('#id-do-componente-a-remover').addClass("menu-remove");

        }

The focusin works if the component "gains attention", ie a mouse click or a tab to it, already the Blur is when you lose any focus, the structure would only change to this form :

$("#id-do-componente").blur(function() {

                  $('#id-do-componente-a-remover').addClass("menu-remove");

            }

---

Code Example;

php/html code:

<div id="botao-centro">
   <div id="conteudo-centro">
   //Conteudo do menu do botão centro
   </div>
</div>

css code:

#botao-centro{
  //Conteudo css botao centro
}
#conteudo-centro {
 //Conteudo css menu centro
}
#conteudo-centro .menu-remove{
  display:none,
}

jquery code:

 $("#botao-centro").on("focusout",function() {

          $('#conteudo-centro').addClass("menu-remove");

    }