Tengo un menú y una de las opciones tiene un submenú. El submenú quiero que se despliegue cuando paso el ratón por encima del elemento que lo contiene, y lo hace, pero en cuanto intento ir a una de las opciones del submenú, desaparece.
Aquí el código HTML y CSS (Reducido):
<style>
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:link ~ .submenu {
display: none;
background-color: black;
border-radius: 10px;
}
.mostrar:visited ~ .submenu {
display: none;
background-color: black;
border-radius: 10px;
}
.mostrar:focus ~ .submenu {
display: none;
background-color: black;
border-radius: 10px;
}
.mostrar:hover ~ .submenu {
display: block;
background-color: black;
border-radius: 10px;
}
.mostrar:active ~ .submenu {
display: none;
background-color: black;
border-radius: 10px;
}
.menu{
display: block;
}
</style>
<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>
<a class="nav-link mostrar" data-toggle="pill" href="#" role="tab" aria-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="#" role="tab" aria-controls="servicio1" aria-selected="true">Servicio 1</a>
</li>
<li>
<a class="nav-link" data-toggle="pill" href="#" role="tab" aria-controls="servicio2" aria-selected="true">Servicio 2</a>
</li>
</ul>
</li>
</ul>
</nav>