Cuando empiezas con la creación de los menu desplegables o también llamados Drop Down, o simplemente submenus, quizá se te haga un poco difícil de entenderlos, pero en realidad es mas simple de lo que te imaginas, solo es cuestión de hacer lo mismo que un menu normal pero dentro de otra ul que debe de estar dentro de un li, a lo mejor no me entiendas, pero no se preocupes que paso a explicarlo en este tutorial. bueno antes que nada debemos declarar el html en nuestro editor y agregar el enlace a nuestra hoja de estilos (styles.css).
<!doctype html>Menus desplegable Básico <!--aqui irá el menu desplegable-->
Una ves declarado y enlazado nuestra hoja de estilos, nos toca trabajar en nuestro menu. Agregamos nuestra etiqueta de lista desordenada «<ul>» y dentro de ella, crearemos las listas «<li>» con la clase «nivel1» dentro de esas listas, crearemos otras listas desordenadas «<ul>» y por ultimo dentro de las listas desordenadas crearemos lo que vendría a hacer nuestro sub menu o menu desplegable en una «<li>». eso es todo, ahora solo nos queda dar estilos a nuestro menu.
</pre> <ul> <li class=""nivel1""><a class=""nivel1"" href=""#"">Menu 1</a> <ul> <li><a href=""#"">Menu 1.1</a></li> </ul> </li> </ul> <pre>
por último solo nos queda trabajar en nuestra hoja de estilos «styles.css» que ya lo hemos enlazado en el 1er ejercicio al declarar el html.
ul { list-style-type: none;}
ul li.nivel1 { float: left;
width: 162px;
margin-right: 2px;
}
ul li a {display: block;
text-decoration: none;
color: #fff;
background-color: #666;
border: solid 1px #fff;
padding: 8px;
position: relative;
}
ul li:hover {position: relative;
}
ul li a:hover, #menu ul li:hover a.nivel1 {background-color: #888;
color: #000;
position: relative;
}
ul li a.nivel1 {display: block!important;display: none;
position: relative;
}
ul li ul {display: none;
}
ul li a:hover ul, #menu ul li:hover ul {display: block;
position: absolute;left: 0px;
}
ul li ul li a {width: 160px;
padding: 6px 0px 8px 0px;
border-top-color: #000;
}
ul li ul li a:hover {border-top-color: #000;
position: relative;
}
te debería quedar algo así: 
Esta es la forma mas simple de hacer un menu con submenu, llamado también menu desplegable o Drop Down. como siempre dejo la demo original del este tutorial con mas menus y submenus desplegables, si deseas también dejo la descarga de los archivos originales del tutorial, (contraseña del zip: antocas.com).
