Menús desplegables solo con CSS

<div class="menu">
    <ul>
        <li><a href="#">Menu uno</a></li>
        <li><a href="#">Menu dos</a></li>
        <li><a href="#">Menu tres</a></li>
        <li><a href="#">Menu cuatro</a></li>
        <li><a href="#">Menu cinco</a></li>
        <li><a href="#">Menu seis</a></li>
    </ul>
</div>

/*Nuestras propiedades generales*/
*{margin:0;padding:0;outline:0;text-decoration:none;border:0;}
body{width:900px;margin:50px auto;}
/*Relevante*/
ul{
	list-style:none;/*Importante aqui le quitamos todas las viñetas a nuestro sitio*/
}
.menu{
	width:850px; 
	margin:auto;
}
.menu ul{
	width:620px;
	height:50px;
	margin:auto;
	padding:0 25px;
	background:url(bg_mn.gif) no-repeat;
}
.menu ul li{
	display:inline; /*Importante para que todas nuestras listas, esten en una misma linea, igual podemos usar el "float:left;" pero tendriamos que darle un "width" para evitar "advertencias" CSS,*/
	position:relative; /*Importante para el submenu pero por ahora no*/
}
.menu ul li a{
	float:left; /*Aqui prodriamos usar el "display:inline;" pero no respetaba sus medidas, asi que podriamos cambiarlo a "display:inline-block;" y se veria correcto, pero ie 6 y 7, aun no lo llevan asi que para evitar problemas, seguimos con el viejo "float:left"*/
	margin:0 5px;
	padding:0 5px;
	text-align:center;
	width:80px;
	height:50px;
	font:bold 10px/4.5em Verdana;/*Siempre me han pedido un manual para abreviar el CSS, trankilos ya viene... aqui, le di el font:weight, size, line-heigth, y font-family"*/
	color:#FFF;
	background:url(bg_mn_a.gif);
}
.menu ul li a:hover{
	background:url(bg_mn_a.gif) 0 50px; /*Usuamos una sola imagen y al pasar el cursor se baja el fondo 50px para hacer el efecto sin JS*/
	color:#35608B;
}

<div class="menu">
    <ul>
        <li><a href="#">Menu uno</a></li>
        <li><a href="#">Menu dos</a></li>
        <li>
        	<a href="#">Menu tres</a>
            <ul>
                <li><a href="#">SubMenu uno</a></li>
                <li><a href="#">SubMenu dos</a></li>
                <li><a href="#">SubMenu tres</a></li>
                <li><a href="#">SubMenu cuatro</a></li>
            </ul>
        </li>
        <li><a href="#">Menu cuatro</a></li>
        <li><a href="#">Menu cinco</a></li>
        <li><a href="#">Menu seis</a></li>
    </ul>
</div>

*{margin:0;padding:0;outline:0;text-decoration:none;border:0;}
body{
	width:900px;
	margin:50px auto;
}
ul{
	list-style:none;
}
.menu{
	width:850px;
	margin:auto;
}
.menu ul{
	width:620px;
	height:50px;
	margin:auto;
	padding:0 25px;
	background:url(bg_mn.gif) no-repeat;
}
.menu ul li{
	position:relative;
	width:auto;
	float:left;/*Esta vez le dimos un float left... para que no de problemas la posision relativa*/
}
.menu ul li a{
	float:left;
	margin:0 5px;
	padding:0 5px;
	text-align:center;
	width:80px;
	height:50px;
	font:bold 10px/4.5em Verdana;
	color:#FFF;
	background:url(bg_mn_a.gif);
}
.menu ul li a:hover{
	background:url(bg_mn_a.gif) 0 50px;
	color:#35608B;
}
/*MENU DESPLEGABLE*/
.menu ul li:hover ul{ display:block;} /*Indicamos que en hover del menu muestre el submenu*/
.menu ul ul{
	display:none; /*indicamos que al cargar la web no muestre el submenu*/
	width:200px;/*Le cambiamos el ancho sino hereda del ul anterior*/
	position:absolute;
	top:50px;
	height:auto;
	background:#5696C1;
	padding:5px 0 10px;
	left:5px;
}
.menu ul ul li, .menu ul ul li a{
	float:none;
	display:block;
	width:auto;	
}
.menu ul ul li a{
	background:none;
	border-bottom:1px solid #A3CADB;
	height:25px;
	text-align:left;
	line-height:2em;
	width:180px;
	color:#A3CADB;
}
.menu ul ul li a:hover{
	background:none;
	color:#FFF;
}