Cómo crear un menú desplegable utilizando solo HTML y CSS

En un artículo anterior, vimos cómo crear un menú desplegable con JavaScript (jQuery). En este artículo, veremos cómo crear un menú desplegable usando solo HTML y CSS. Esta implementación no siempre es adecuada para todos, pero en algunos casos puede ser útil. Nuestro menú será horizontal. Los elementos del menú tendrán un ancho fijo. Establezcamos position: relative para todos los elementos de la lista. Y position: absolute para el menú anidado. El submenú aparecerá al pasar el ratón sobre el elemento padre. Toda la mecánica se logra gracias a la pseudoclase :hover. Nuestro menú contendrá varios niveles de anidación.

Video

HTML

<ul class="menu">
	<li>
		<a href="#">Item 1</a>
		<ul>
			<li><a href="#">Subitem 1-1</a></li>
			<li>
				<a href="#">Subitem 1-2</a>
				<ul>
					<li><a href="#">Subitem 1-2-1</a></li>
					<li><a href="#">Subitem 1-2-2</a></li>
					<li><a href="#">Subitem 1-2-3 </a></li>
				</ul>
			</li>
			<li>
				<a href="#">Subitem 1-3</a>
				<ul>
					<li><a href="#">Subitem 1-3-1</a></li>
					<li><a href="#">Subitem 1-3-2</a></li>
					<li><a href="#">Subitem 1-3-3</a></li>
				</ul>
			</li>
		</ul>
	</li>
	<li>
		<a href="#">Item 2</a>
		<ul>
			<li>
				<a href="#">Subitem 2-1</a>
				<ul>
					<li><a href="#">Subitem 2-1-1</a></li>
					<li><a href="#">Subitem 2-1-2</a></li>
					<li><a href="#">Subitem 2-1-3</a></li>
				</ul>
			</li>
			<li><a href="#">Subitem 2-2</a></li>
			<li><a href="#">Subitem 2-3</a></li>
		</ul>
	</li>
	<li><a href="#">Item 3</a></li>
	<li><a href="#">Item 4</a></li>
</ul>

CSS

.menu {
	display: flex;
}

.menu li {
	width: 200px;
	list-style: none;
	position: relative;
}

.menu a {
	display: block;
	color: #fff;
	background: #07355e;
	text-decoration: none;
	text-align: center;
	height: 40px;
	line-height: 40px;
	transition: all 0.5s;
}

.menu a:hover {
	opacity: 0.8;
}

.menu ul {
	position: absolute;
	left: 0;
	top: 100%;
	display: none;
	padding: 0;
}

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

.menu ul ul {
	top: 0;
	left: 100%;
}

Puedes ver un ejemplo de cómo podría verse y funcionar el menú en Codepen: https://codepen.io/igorrybalko/pen/EaaopVO

El menú desplegable es uno de los elementos de interfaz más comunes en los sitios web modernos. Se encuentra en barras de navegación, encabezados, paneles de control y diversos tipos de aplicaciones web. Su popularidad radica en que permite a los desarrolladores organizar gran cantidad de enlaces u opciones de forma compacta y estructurada, sin sobrecargar la interfaz.

Desde la perspectiva del usuario, los menús desplegables son familiares e intuitivos. La mayoría de los usuarios ya comprenden su funcionamiento, lo que facilita y agiliza la navegación. Además, un menú desplegable bien diseñado puede mejorar la apariencia general de un sitio web, dándole un aspecto más limpio y profesional, sin comprometer la usabilidad.