0

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>

1 respuesta 1

1

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="#" 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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.