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 insertar estilos css en html

Imagen destacada del artículo Cómo insertar estilos css en html

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

Cómo cambiar color de texto html con css

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

Cómo crear un formulario de contacto con html

Imagen destacada del artículo Cómo crear un formulario de contacto con html

Cómo centrar un div con css

Imagen destacada del artículo Cómo centrar un div con css

Top 8 lenguajes backend más usados en la actualidad

Imagen destacada del artículo Top 8 lenguajes backend más usados en la actualidad

Calcular cuantos días hay entre dos fechas con javascript

Imagen destacada del artículo Calcular cuantos días hay entre dos fechas con javascript

Headless cms (cms sin cabeza) que es y porque deberías usarlo

Imagen destacada del artículo Headless cms (cms sin cabeza) que es y porque deberías usarlo