Cómo crear menús desplegables con HTML y CSS puro

Los menús desplegables son una herramienta fundamental en el diseño web moderno. No solo mejoran la navegación del usuario, sino que también optimizan el espacio en el diseño de una página. En este artículo, te enseñaremos cómo crear menús desplegables utilizando solamente HTML y CSS, proporcionándote un enfoque sencillo y efectivo.

¿Qué es un menú desplegable?

Un menú desplegable es un tipo de interfaz gráfica que permite a los usuarios acceder a diversas opciones o submenús de manera jerárquica. Este tipo de menú se abre al hacer clic o pasar el ratón sobre un elemento, y se cierra al seleccionar una opción o al hacer clic afuera de él. Es una forma práctica de organizar contenido en la navegación de un sitio web.

Estructura básica de un menú desplegable

Para empezar, necesitamos definir la estructura básica de nuestro menú utilizando HTML. A continuación, te mostramos un ejemplo simple de cómo se puede hacer esto.

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menú Desplegable</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav>
        <ul class="menu">
            <li><a href="#">Inicio</a></li>
            <li><a href="#">Servicios</a>
                <ul class="submenu">
                    <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="#">Contacto</a></li>
        </ul>
    </nav>
</body>
</html>

En este código, hemos creado una lista no ordenada (ul) que representa el menú principal y un submenú dentro de uno de los elementos de la lista.

Estilo con CSS

Ahora que tenemos la estructura HTML, es hora de dar estilo a nuestro menú utilizando CSS. A continuación, te mostramos cómo hacerlo:

CSS

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

nav {
    background-color: #000;
}

.menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

.menu > li {
    position: relative;
}

.menu > li > a {
    display: block;
    padding: 15px 20px;
    color: #ffffff;
    text-decoration: none;
}

.menu > li:hover > a {
    background-color: #444;
}

.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    list-style: none;
    background-color: #333;
    padding: 0;
    margin: 0;
    z-index: 1000;
}

.submenu > li > a {
    padding: 10px 20px;
    color: #ffffff;
    text-decoration: none;
    display: block;
}

.menu > li:hover .submenu {
    display: block;
}

.submenu > li:hover > a {
    background-color: #444;
}

Explicación del CSS

Estilo básico: El body se configura con una fuente legible y un color de fondo claro.
Estilo del menú: El menú tiene un fondo oscuro y los elementos de la lista se establecen para flotar a la izquierda. Los enlaces cambian de color al pasar el ratón sobre ellos.
Estilo del submenú: El submenú está oculto por defecto (display: none;) y se muestra solo cuando el usuario pasa el ratón sobre el elemento principal. Se posiciona absolutamente para que aparezca directamente debajo de su elemento correspondiente.

Compatibilidad

Este enfoque con HTML y CSS puro es ampliamente compatible con todos los navegadores modernos. Sin embargo, si estás diseñando un sitio web que necesite soporte para navegadores más antiguos, considera agregar un poco de JavaScript para mejorar la funcionalidad.

Conclusión

Crear un menú desplegable con HTML y CSS puro es un proceso sencillo que no requiere de bibliotecas externas ni de JavaScript complejo. Este método no solo es eficaz, sino que también mejora la velocidad y la carga del sitio web. Al seguir los pasos anteriores, puedes diseñar un menú funcional que mejore la experiencia del usuario en tu sitio web.

Ahora que tienes el conocimiento necesario, ¡es hora de implementar tu propio menú desplegable y llevar la navegación de tu sitio web al siguiente nivel!

Siguiendo estos consejos y ejemplos, estarás bien equipado para crear menús desplegables efectivos y atractivos en tus proyectos web. ¡Buena suerte!