Menú de navegación horizontal desplegable en CSS.

El menú que utilizamos está dentro de una capa con una posición absoluta, por lo que podremos colocarlo en el lugar que queramos dentro del documento HTML. En el ejemplo utilizamos un <DIV> identificado como global y le dimos una posición top=0px / left=0px.

Para los ítem y subítem del menú CSS utilizamos una tabla común. La primera fila tendrá los ítem propios del menú desplegable y la segunda fila tendrá en cada una de sus celdas una tabla identificada con los subítem del ítem correspondiente.

Para que al mover el puntero del mouse sobre las celdas de ítem aparezca la tabla que contiene los subítem utilizamos el evento onMouseMove de la celda que contiene cada ítem. En la primera celda de la tabla podemos ver que el evento llama a la función Menuin() y le pasa como parámetro el id de la tabla que aparece al mover el mouse sobre esta celda. Esta función sirve para cada uno de los ítem del menú y lo primero que hace es cambiar la propiedad zIndex de la capa que contiene todo el menú. Esto lo hacemos para que la capa se sitúe delante de todos los elementos de la página, de otra manera es posible que quede oculta tras otra capa. Lo segundo que hace es cambiar la propiedad visibility dándole el valor visible.

Cuando el puntero del mouse sale del elemento (celda) se dispara el evento onMouseOut que llama a la función Menuout(). Esta hace lo opuesto a la anterior función, es decir, vuelve a cambiar las propiedades zIndex y visibility de la tabla que contiene los subítem.

Para que la celda de cada uno de los subítem del menú CSS desplegable cambie de color cuando movemos el puntero del mouse sobre él, utilizamos nuevamente el evento onMouseMove, en este caso llamamos a la función    Itemin() y le pasamos como parámetro la variable que definimos en el mismo evento. Esta variable almacena el identificador de la celda que contiene el subítem. Para que la celda vuelva a tener el mismo color una vez que el puntero del mouse deja de estar sobre ella, utilizamos el evento onMouseOut. Con éste llamamos a la función Itemout que cambia nuevamente el color de la celda.

Si ponemos en marcha el ejemplo podremos ver que es posible tener números de subítem dispares en cada ítem del menú desplegable. Es porque se utiliza una tabla para cada conjunto de subítem.

Lo bueno de este ejemplo es que los enlaces van dentro del documento HTML por lo que serán indexados por los motores de búsqueda como Google y Yahoo. Si queremos agregar más ítem al menú debemos agregar tantas celdas como ítem queramos y para agregar más subítem debemos agregar celdas a la segunda fila de la tabla. Cada una de la tablas y celdas debemos identificarlas mediante el atributo id. No es necesario modificar o agregar código a las funciones del JavaScript.