Cómo crear un menú responsivo con opciones desplegables usando solo HTML y CSS

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
    <nav>
        <ul>
            <li><a href="#">Inicio</a></li>
            <li><a href="#">Servicios</a>
                <ul>
                    <li><a href="#">Diseño Web</a></li>
                    <li><a href="#">SEO</a></li>
                    <li><a href="#">Marketing Digital</a></li>
                </ul>
            </li>
            <li><a href="#">Acerca de</a></li>
            <li><a href="#">Contacto</a></li>
        </ul>
    </nav>
</body>

</html>

Lo siguiente que haremos será darle estilo a nuestro menú usando CSS. Puedes jugar con los colores, fuentes y tamaños para que se adapte al diseño de tu página web. Aquí te dejo un ejemplo de código CSS para este menú:

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #333;
  text-align: center;
}

nav ul li {
  display: inline-block;
  position: relative;
}

nav ul li a {
  display: block;
  padding: 10px 20px;
  color: white;
  text-decoration: none;
}

nav ul li:hover {
  background-color: #555;
}

nav ul ul {
  display: none;
  position: absolute;
  background-color: #333;
}

nav ul li:hover > ul {
  display: block;
}

nav ul ul li {
  display: block;
}

De esta manera, siguiendo este ejemplo podrás crear un menú responsivo con opciones desplegables que se verá genial en cualquier dispositivo.

Cómo crear un menú responsivo con opciones desplegables usando solo HTML y CSS

Aquí tienes un ejemplo de cómo podría lucir tu código HTML

Debes Iniciar Sesión en tu cuenta para publicar comentarios