HTML<ul id="nav">
	<li>
		<a href="#" title="Regreso al página principal">Principalt;/a>
	</li>
	<li>
		<a href="#" title="Sobre nosotros">About</a>
		<ul>
			<li><a href="#">Productos</a></li>
			<li><a href="#">Grupo</a></li>
		</ul>
	</li>
	<li>
		<a href="#" title="Servicios">Servicios</a>
		<ul>
			<li><a href="#">Servicios 1</a></li>
			<li><a href="#">2</a></li>
			<li><a href="#">3</a></li>
			<li><a href="#">3</a></li>
		</ul>
	</li>
	<li>
		<a href="#" title="1º linea">Productos</a>
		<ul>
			<li><a href="#">1</a></li>
			<li><a href="#">2</a></li>
			<li><a href="#">3</a></li>
			<li><a href="#">4</a></li>
			<li><a href="#">5</a></li>
			<li><a href="#">6</a></li>
			<li><a href="#">6</a></li>
			<li><a href="#">8</a></li>
			<li><a href="#">9</a></li>
			<li><a href="#">10</a></li>
			<li><a href="#">11</a></li>
		</ul>
	</li>
	<li>
		<a href="#" title="Contacto">Correo</a>
		<ul>
			<li><a href="#">Horario</a></li>
			<li><a href="#">Ubicación</a></li>
		</ul>
	</li>
</ul>

CSS/*------------------------------------*\
	Navegacion
\*------------------------------------*/
#nav{
	float:left;
	width:100%;
	list-style:none;
	font-weight:bold;
	margin-bottom:10px;
}
#nav li{
	float:left;
	margin-right:10px;
	position:relative;
	display:block;
}
#nav li a{
	display:block;
	padding:5px;
	color:#fff;
	background:#333;
	text-decoration:none;
	
	text-shadow:1px 1px 1px rgba(0,0,0,0.75); /* Sombra para texto */
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
}
#nav li a:hover{
	color:#fff;
	background:#6b0c36;
	background:rgba(107,12,54,0.75); /* Se ve translúcido */
	text-decoration:underline;
}

/*--- Puntos desplegables ---*/
#nav ul{
	list-style:none;
	position:absolute;
	left:-9999px; /* Escondido detrás de la pantalla, cuando no es necesario (este método es mejor que display:none;) */
	opacity:0; /* Establecer el estado inicial de la transparencia */
	-webkit-transition:0.25s linear opacity; /* En Webkit artículos cayendo se le aparecen */
}
#nav ul li{
	padding-top:1px; /* Introduzca el espaciado entre li para crear la ilusión de los elementos de menú separado */
	float:none;
	background:url(dot.gif);
}
#nav ul a{
	white-space:nowrap; /* Detener la transmisión de texto y crear un elemento desplegable de varias líneas */
	display:block;
}
#nav li:hover ul{ /* Imprimir el elemento desplegable con el cursor */
	left:0; /* Nos trae de vuelta a la pantalla cuando se necesita */
	opacity:1; /* Hacer opaca */
}
#nav li:hover a{ /* Define el estilo para el nivel superior, donde la lista desplegable de salida */
	background:#6b0c36;
	background:rgba(107,12,54,0.75); /* Se ve translúcido */
	text-decoration:underline;
}
#nav li:hover ul a{ /* Cambiar algunos de los estilos del nivel superior de la derivación del elemento desplegable */
	text-decoration:none;
	-webkit-transition:-webkit-transform 0.075s linear;
}
#nav li:hover ul li a:hover{ /* Hemos creado el estilo de los elementos desplegables cuando el cursor se induce en un artículo en particular */
	background:#333;
	background:rgba(51,51,51,0.75); /* Será un semi-transparente */
	text-decoration:underline;
	-moz-transform:scale(1.05);
	-webkit-transform:scale(1.05);
}