Cree un menú desplegable que se pueda desplazar con CSS.
Menú desplegable básico
Cree un cuadro desplegable que aparece cuando el usuario mueve el mouse sobre un elemento.
Ejemplo:
Ejemplo explicado
HTML Utilice cualquier elemento para abrir el contenido desplegable, p. un elemento <span> o <button>.
Usa un elemento contenedor (como <div>) para crear el contenido desplegable y agregue lo que quiera dentro de él.
Envuelve un elemento <div> alrededor de los elementos para colocar el contenido desplegable correctamente con CSS.
CSS La clase .dropdown usa position:relative, que es necesaria cuando queremos que el contenido desplegable se coloque justo debajo del botón desplegable (usando position:absolute).
La clase .dropdown-content contiene el contenido desplegable real. Está oculto de forma predeterminada y se mostrará al pasar el mouse (ver más abajo). Tenga en cuenta que min-width está establecido en 160px. Siéntete libre de cambiar esto. Sugerencia: si desea que el ancho del contenido desplegable sea tan ancho como el botón desplegable, establezca el ancho en 100% (y overflow:auto para habilitar el desplazamiento en pantallas pequeñas).
En lugar de usar un borde, hemos usado la propiedad box-shadow de CSS para hacer que el menú desplegable parezca una "tarjeta".
El selector :hover se usa para mostrar el menú desplegable cuando el usuario mueve el mouse sobre el botón desplegable.
Menú desplegable
Cree un menú desplegable que le permita al usuario elegir una opción de una lista:
Este ejemplo es similar al anterior, excepto que agregamos enlaces dentro del cuadro desplegable y los diseñamos para que se ajusten a un botón desplegable con estilo:
Ejemplo:
Contenido desplegable alineado a la derecha
Si desea que el menú desplegable vaya de derecha a izquierda, en lugar de izquierda a derecha, agregue right: 0;
Ejemplo:
Más ejemplos
Dropdown Image
Cómo agregar una imagen y otro contenido dentro del cuadro desplegable.
Ejemplo:
Dropdown Navbar
Cómo agregar un menú desplegable dentro de una barra de navegación.
Ejemplo:
Resumen
Este tutorial de CSS muestra cómo crear menús desplegables con CSS, incluyendo ejemplos de menús básicos, menús con enlaces y menús alineados a la derecha. También hay ejemplos de cómo agregar imágenes y menús desplegables a una barra de navegación.
Traducido con 💚 desde W3Schools.com