Imagen destacada del artículo Cómo crear un menú desplegable con html y css

Cómo crear un menú desplegable con html y css

html svgcss svg
actualizado: 21 / 09 / 2022

En muchos sitios web podemos apreciar como en un menú de navegación con muchos enlaces cuando pasas el puntero o haces click en algunos algunos de estos elementos, se despliega un contenedor con otros enlaces a esto se le conoce como menú desplegable o dropdwon a continuación aprenderás a crearlo de forma sencilla y solo con html y css

Estructura html para nuestro menú desplegable

html
<nav>
<ul class="main-links">
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<li class="dropdown-li">
Elemento dropdown
<ul class="dropdown">
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</li>
</ul>
</nav>

En esta estructura html tenemos un nav que en este caso actúa como contenedor del elemento, después un elemento ul con la clase "main-links" con diferentes elementos de lista (li) el cuarto elemento que actuará como el contenedor de los elementos desplegables le agregamos a la clase "dropdown-li".

Por último dentro de este elemento "dropdown-li" agregamos otro elemento "ul" con diferentes "li" que serán los que deben aparecer cuando se haga hover.

Poner en horizontal todo el menú con flexbox

css
.main-links {
display: flex;
gap: 1rem;
list-style: none;
}

Estilos css para hacer aparecer el dropdwon desplegable

Un menú desplegable no sería tal si no se oculta y se hace aparecer a continuación aplicamos los estilos para lograr que cuando se haga hover se despliegue el resto de elementos.

css
.main-links li {
padding: 0.5rem 1rem;
background-color: rgb(10, 207, 197);
}
.dropdown-li {
position: relative;
}
.dropdown-li:hover .dropdown {
display: block;
opacity: 1;
}
.dropdown {
background-color: slateblue;
margin: 0;
padding: 0;
width: 100%;
position: absolute;
left: 0;
top: 100%;
opacity: 0;
display: none;
background: red;
}
.dropdown li {
list-style: none;
}

Prueba tu mismo el menu desplegable

Nota importante:

Este es un ejemplo muy basico con un poco de esfuerzo puedes lograr que se vea 10 veces mejor.

Cargando... Esperando para mostrar el código de este ejemplo
Artículos relacionados:
Cómo poner comentarios en javascript

Imagen destacada del artículo Cómo poner comentarios en javascript

Cómo desinstalar paquetes npm

Imagen destacada del artículo Cómo desinstalar paquetes npm

Aprende a usar e insertar imágenes en html

Imagen destacada del artículo Aprende a usar e insertar imágenes en html

Cómo poner una imagen de fondo en html con css

Imagen destacada del artículo Cómo poner una imagen de fondo en html con css

Cómo crear un dropdown (menu desplegable) accesible con reactjs

Imagen destacada del artículo Cómo crear un dropdown (menu desplegable) accesible con reactjs

Cómo justificar el texto html con css

Imagen destacada del artículo Cómo justificar el texto html con css

Cómo cambiar color del texto en html con css

Imagen destacada del artículo Cómo cambiar color del texto en html con css

Cómo poner color de fondo en html con css

Imagen destacada del artículo Cómo poner color de fondo en html con css