Cómo Hacer un Menú Desplegable en HTML Fácil y Rápido

Crear un menú desplegable en HTML puede parecer una tarea complicada, pero con los conocimientos correctos, se puede hacer de manera rápida y sencilla. En este artículo, te mostraremos cómo hacerlo paso a paso.

Primeros Pasos para crear un menú desplegable

Para empezar, necesitas tener una noción básica de HTML y CSS. Un menú desplegable puede ser implementado utilizando una simple lista desordenada (<ul>) y algunos estilos CSS para darle el comportamiento deseado.

Implementación en HTML del menú

Primero, define la estructura básica del menú:

<ul>
    <li><a href="#">Opción 1</a></li>
    <li class="dropdown">
        <a href="#">Opción 2</a>
        <ul class="submenu">
            <li><a href="#">Subopción 1</a></li>
            <li><a href="#">Subopción 2</a></li>
        </ul>
    </li>
    <li><a href="#">Opción 3</a></li>
</ul>

Este código crea una lista principal con una opción desplegable.

Estilización con CSS

Luego, agrega el siguiente CSS para darle estilo al menú y asegurarte de que el submenú esté oculto por defecto:

/* El submenú estará oculto por defecto */
.dropdown .submenu {
    display: none;
    position: absolute; /* Para que el submenú se posicione debajo de la opción principal */
    top: 100%; /* Alinea el submenú justo debajo de la opción */
    left: 0;
    background-color: #333; /* Estilo del fondo del submenú */
    padding: 0;
    list-style-type: none;
    z-index: 1000; /* Asegura que el submenú esté en el frente */
}

/* El submenú aparece al pasar el ratón sobre la opción principal */
.dropdown:hover .submenu {
    display: block;
}

/* Opciones del submenú en bloque */
.submenu li {
    display: block;
}

/* Estilo de enlaces dentro del submenú */
.submenu li a {
    text-decoration: none;
    padding: 10px 20px;
    display: block;
    color: white; /* Color del texto */
    background-color: #333; /* Fondo del submenú */
}

.submenu li a:hover {
    background-color: #555; /* Cambio de color al pasar sobre el enlace */
}

Este CSS hace que el submenú se muestre cuando el usuario pasa el cursor sobre la opción principal.

Conclusión de nuestro menú desplegable HTML

Como puedes ver, hacer un menú desplegable en HTML es bastante fácil y rápido con los pasos y el código proporcionados. Con algo de práctica, podrás personalizarlo según tus necesidades y crear menús más complejos si lo deseas.

Siguiente lección: Cómo utilizar Hipervínculos en HTML