45. Menús desplegables CSS (CSS Dropdowns)

Dropdown básico

Vamos a crear nuestro primer dropdown básico, el cual aparecerá cuando el usuario mueva el cursor sobre el enlace.

<!DOCTYPE html>
<html lang="es">
  <head>
    <style>
      .dropbtn {
        background-color: #4caf50;
        color: white;
        padding: 16px;
        font-size: 16px;
        border: none;
        cursor: pointer;
      }

      .dropdown {
        position: relative;
        display: inline-block;
      }

      .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      }

      .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
      }

      .dropdown-content a:hover {
        background-color: #f1f1f1;
      }

      .dropdown:hover .dropdown-content {
        display: block;
      }

      .dropdown:hover .dropbtn {
        background-color: #3e8e41;
      }
    </style>
  </head>
  <body>
    <h2>Menú Dropdown</h2>
    <p>Mueve el cursor sobre el menú para mostrar el menú desplegable</p>

    <div class="dropdown">
      <button class="dropbtn">Home</button>
      <div class="dropdown-content">
        <a href="#">Quienes somos</a>
        <a href="#">Donde estamos</a>
        <a href="#">Contacto</a>
      </div>
    </div>
  </body>
</html>
Scroll al inicio