Lo interesente de las reglas anteriores es la propiedad **overflow**∞, que nos servirá para ocultar los submenus (overflow: hidden) y hacerlos visibles cuando el mouse pase por alguna de las opciones (overflow: visible). Ahora bien, para que las opciones del menú principal se desplieguen de manera horizontal utilizamos la regla 'position: absolute' y a cada opción le asignamos un id en el cual especificamos manualmente el offset a la izquierda que tendrá cada opción. En el html, a cada item de la lista principal le tenemos que asignar la clase .menuitem y el id correspondiente. Por ejemplo, para la primera opción del menú principal el html del list item sería: <li class='menuitem' id='m1'>, y para la cuarta opción: <li class='menuitem' id='m4'>. Juntando todo, y siguiendo con nuestro ejemplo, el código html quedaría ∞, lo que desplegaría esto∞.

---

Si ven ya logramos hacer un menú con opciones!! Eso ya es un gran avance. Pero si lo que queremos es tener submenús dentro de las opciones de los submenús, aún nos falta un poco, y que es la parte más interesante de este tutorial . Si analizan el código del paso anterior, las opciones de los submenús se están desplegando no como subopciones, sino al mismo nivel que las opciones de los submenús principales. Lo que tenemos que hacer es definir que las opciones de los submenús se desplieguen a la derecha de la opción de la que se derivan. Vamos a agregar las siguientes reglas de css:
.submenu li { position: relative; }

.subsubmenu
{
}

.submenu li:hover > .subsubmenu
{
}


En la primera regla definimos que la posición será relativa para los elementos <li> que estén contenidos dentro de un elemento que tenga la clase submenu (que en nuestro caso serán los elementos <ul class='submenu'>). Esto nos sirve para que los menús de los siguientes niveles de submenús se desplieguen a la misma altura que se encuentra la opción del menú al que pertenecen. Si no ponemos esta regla nuestro menú quedaría ∞. Después de esto, definimos la clase .subsubmenu, en donde especificamos, entre otras cosas, que la posición será absoluta con relación al elemento que lo contiene (que en nuestro caso seran los elementos <li> que a su vez están contenidos en los elementos <ul class='submenu'>), y definimos su offset a la izquierda. En la tercer regla definimos la pseudo-clase hover para que al pasar el mouse por una opción que tenga submenús los despliegue. Chequen que esta regla de css se aplicará a los elementos que tengan la clase .subsubmenu y que sean hijos de un elemento <li>, los cuales a su vez deben de tener o pertenecer a un elemento que tenga la clase .submenu (si quieren saber más de los child selectors revisen la documentación de css haciendo click en esta liga∞). A nivel de html, a cada lista de los submenús principales que vayan a contener uno o más niveles de submenús se le tiene que asignar la clase submenu: <ul class='submenu'>, y a las listas que contengan las opciones de los submenús se les tiene que asignar la clase subsubmenu: <ul class='subsubmenu'>. Siguiendo con el ejemplo, el código html quedaría ∞, y desplegaría esto∞.

---

Ahora sí ya tenemos un verdadero menú con varios niveles de submenús!!. Lo que resta es ponerle bordes para que se vea más presentable. Le estuve checando y probando, y la manera como me funcionó esto de los bordes es de una manera artesanal, con este código de css:
.b_top {border-top:1px solid #369; }
.b_right {border-right:1px solid #369; }
.b_bottom {border-bottom:1px solid #369; }
.b_left {border-left:1px solid #369; }


A cada opción del menú, dentro del elemento <a> le asignamos las clases que necesitemos separadas por espacios. Por ejemplo, para la segunda opción del menú principal el html quedaría: <a class='b_top b_right b_bottom' href='#'>, y para una opción que a nivel de diseño sea la última de la lista: <a class='b_right b_bottom b_left' href='#'>. Esto es un poco tedioso, pero generalmente sólo lo tendremos que hacer una vez al realizar el diseño del menú, ya que después de que esté funcional, las modificaciones serán mínimas, quizás al aumentar una nueva opción, o un nuevo submenú, dependiendo de las necesidades que surgan. Siguiendo con el ejemplo, el html ya con bordes sería ∞, y desplegaría esto∞. Yo tuve algunos problemas para que todos los bordes se vieran alineados, porque algunos en lugar de que se sobreescribieran, a nivel de diseño se veían más gruesos; es por eso que tuve que jugar con las posiciones absolutas de los id #m.

---

Así termina este tutorial, espero que les sea de utilidad. Ah, se me olvidada comentar, con MS IExplorer no va a funcionar porque este browser no tiene soporte total de CSS2, podría funcionar con algunos truquitos y simulando el efecto hover de los list items con Javascript, pero mejor utilicen un browser que cumpla con los estándares, tal como Mozilla, Firefox, Netscape, Opera, etc.