Bueno, para lo que deseas debes saber algo de CSS y supongo que no tienes mucha idea, te explico.
El CSS del menú desplegable debe ser mas o menos como
ul.padre
ul li
ul li:hover
ul li:hover ul.hijo
Para comenzar, debes poner los ul li, como display: inline;, ya que un elemento <li> por defecto es block, lo que conlleva que se apilen en forman de pila.
Por otro lado, ul.parent debe tener esta regla, list-style: none; así logramos quitar los marcadores de una lista como es ul.
Código:
ul.padre
{
margin: 0;
padding: 0;
list-style: none;
}
ul.padre li
{
/* Permite a esta etiqueta alinear en forma horizontal
también puede lograrse con float:left, aunque me parece mas límpio
usar este método. */
display: inline;
}
ul.padre li:hover
{
/* La única relevancia del uso de hover en los <li> de primer nivel es para
realizar cambios en el aspecto físico : ej.*/
color: red; /* Torna el texto contenido del <li> a rojo. */
}
ul.padre ul.hijo
{
/* Si disponemos de un submenu en alguno de los <li> de primer nivel,
por defecto está oculto */
display: none;
}
ul.padre li:hover ul.hijo
{
/* Si disponemos de un submenu en alguno de los <li> de primer nivel,
aquí permitimos que se muestren cuando se mueve el cursor del ratón
por el área de ese <li> */
display: block;
}
Como ves, ese muy sencillo formatear un menú con submenús desplegable con CSS, sin embargo, esto es lo básico, hay gente que sabe muchísimo mas que yo, pero desde aquí te animo a que seas tu el que vaya probando y aprendiiendo por tu cuenta.
Como ves, he añadido dos clases para mantener el código algo mas legible y fácil de entender, sin embargo, se puede conseguir sin utilizar clases.