Menú desplegable en CSS

En este tutorial aprenderemos a crear un menú desplegable utilizando únicamente CSS. Utilizaremos una lista desordenada para crear las opciones principales del menú. Cada opción estará compuesta de un vínculo y una capa la cual se mostrará al colocar el cursor en el vínculo.

Empecemos creando la estructura de nuestro menú de la siguiente forma:

<ul id="menu">
	<li>
		<a href="#">Inicio</a>
		<div></div>
	</li>
	<li>
		<a href="#">Blog</a>
		<div></div>
	</li>
	<li>
		<a href="#">Tutoriales</a>
		<div></div>
	</li>
	<li>
		<a href="#">Galería</a>
		<div></div>
	</li>
	<li>
		<a href="#">Contacto</a>
		<div></div>
	</li>
</ul>

Colocaremos después el contenido que se desplegará. Ahora daremos estilos básicos a la lista:

ul#menu{
	list-style:none;
}
ul#menu li{
	float:left;
	position:relative;
}
ul#menu li:hover{
	border-bottom:0;
	margin-top:-7px;
	padding:7px 0 1px 0;
	z-index:500;
}

Al especificar un atributo seguido de :hover podemos indicar los estilos al pasar el cursor sobre el elemento. Ahora colocamos los estilos para el vínculo y el contendo desplegable:

ul#menu li a{
	background:#333;
	color:#FFF;
	display:block;
	padding:10px;
	text-decoration:none;
}
ul#menu li div{
	background:#eee;
	left:-999em;
	padding:10px;
	position:absolute;
	width:150px;
	z-index:1000;
}
ul#menu li:hover div{
	left:0px;
	top:auto;
}

La propiedad left colocará al contenido desplegable fuera de la pantalla, y será visible cuando coloquemos el cursor sobre el elemento de la lista.