Eso pasa por que el elemento que debe tener el hover
es el padre directo del menú desplegable y no su hermano (en este caso la etiqueta <a>
).
Cuando estás intentando salir de la etiqueta <a>
para ingresar al menú desplegable estás terminando la ejecución del hover
y es por eso que se vuelve a desaparecer, mientras que si su elemento padre fuera el que tuviera el hover
sin importar si estas encima de la <a>
o del menú desplegable vas a seguir estando en el elemento que tiene el hover
.
Espero haber sido claro, si tienes dudas con gusto las responderé.
nav{
height: 50px;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
}
.nav{
padding-top: 15px;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link{
background-color: red;
}
.nav-link{
color: red;
}
.nav-link:hover {
color: #fff;
}
/* Control de los submenús */
.submenu{
display: none;
position: absolute;
}
.mostrar:hover > .submenu {
display: block;
background-color: black;
border-radius: 10px;
}
.menu{
display: block;
}
<nav>
<ul class="nav nav-pills mb-3" role="tablist">
<li>
<a class="nav-link active" data-toggle="pill" href="#inicio" role="tab" aria-controls="inicio" aria- selected="true">Inicio</a>
</li>
<li class="mostrar">
<a class="nav-link" data-toggle="pill" href="#trabajos"href="#" role="tab" aria-controls="trabajos"controls="servicios" aria-selected="true">Servicios</a>
<ul class="nav nav-pills mb-3 submenu" role="tablist">
<li>
<a class="nav-link" data-toggle="pill" href="#ebanisteria"href="#" role="tab" aria-controls="ebanisteria"controls="servicio1" aria-selected="true">Servicio 1</a>
</li>
<li>
<a class="nav-link" data-toggle="pill" href="#restauracion"href="#" role="tab" aria-controls="restauracion"controls="servicio2" aria-selected="true">Servicio 2</a>
</li>
</ul>
</li>
</ul>
</nav>