A raiz del éxito que ha tenido el menú desplegable vertical y de algunas solicitudes, he investigado en el sitio de Stuart Nicholls (CSSplay), el cual contiene innumerables ejemplos de css. De allí tomé el menú «flyout-anywidth» y lo modifiqué un poco para crear los bordes, diferenciar el primer nivel y permitir multilínea en el primer nivel.
El menú es totalmente «cross browser», funciona en IE6, IE7, IE8, Firefox, Opera, Safari y Chrome. Ya lo he usado en un par de proyectos y funciona de maravilla. Es muy liviano y fácil de actualizar, ya que está formado por items de una lista (ul, li).
Este es un ejemplo sencillo de menú de 3 niveles hechos solo con css y li’s:
Descargar código (zip)
Instrucciones
Si revisan el código se darán cuenta que para que funcione en Internet 6 los menús desplegables se formarán por medio de una tabla. Para esto se usan comentarios condicionales, los cuales solo funcionan en Internet Explorer:
<!--[if gte IE 7]><!--></a><!--<![endif]-->
La anterior línea quiere decir que si el navegador es una versión igual o superior a Internet Explorer 7 entonces cerrará el tag a (</a>). Cada nivel superior del menú debe incluir este comentario.
Igualmente al abrir o inicial un nivel del menú se debe incluir:
<!--[if lte IE 6]><table><tr><td><![endif]-->
Esto lo que hace es abrir una celda de una tabla si el navegador es Internet Explorer 6. Al finalizar la lista (ul) con sus items se debe incluir el comentario:
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
Este comentario cierra la celda, la tabla y el tag «a», el cual habíamos dejado abierto con el primer comentario incluido.
La regla de estilos «#menu table» se usa para posicionar la tabla desplegable en Internet Explorer 6.
Si van a usar el menú por favor dejen los créditos de Stu Nicholls en el css.