Introducción
Crea un menú desplegable que aparece cuando el usuario pasa el mouse sobre un elemento.
Paso 1) Agregar HTML:
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>Ejemplo explicado.
Utilice cualquier elemento para abrir un menú desplegable, por ejemplo, un elemento <button>, <a> O <p>.
Desde un elemento contenedor (como <div>) para crear un menú desplegable y agregar enlaces desplegables dentro de él.
Un elemento <div> alrededor del botón y <div> Ajuste para que el menú desplegable esté posicionado correctamente con CSS.
Paso 2) Agregar CSS:
/* Dropdown Button */
.dropbtn {
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;}Ejemplo explicado
Hemos diseñado el botón deslizante con color de fondo, relleno, etc.
La clase .dropdown usa position:relative cuando es necesario posicionar el contenido del menú desplegable directamente debajo del botón desplegable (usando position:absolute).
La clase .dropdown-content contiene el menú desplegable. Está oculto por defecto y se muestra en modo flotante (ver más abajo). Tenga en cuenta que el ancho mínimo es de 160 px. Puede modificarlo libremente. Consejo: Si desea que el ancho del contenido del menú desplegable sea igual al del botón desplegable, configure el ancho al 100 % (y configure overflow: auto para permitir el desplazamiento en pantallas pequeñas).
En lugar de usar un borde, usamos la propiedad box-shadow para que el menú desplegable parezca una tarjeta. También usamos el índice z para posicionar el menú desplegable delante de otros elementos.
El selector :hover se utiliza para mostrar el menú desplegable cuando el usuario pasa el mouse sobre el botón desplegable.
