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

Actualizado : 2023-10-13

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

Leer

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

Juneiker Castillo freelance web developer

Soy Juneiker Castillo, un desarrollador web frontend apasionado por la programación y la creación de sitios web modernos rápidos y escalables, en fin un friki 🤓 de javascript enamorado de react js ⚛️.

Sobre mi