En este caso nos encontramos con un menú en el que, al pulsar sobre cada una de las opcines nos llevará al destino especificado o bien abrirá un submenú. En ambos casos la pulsación sobre el menú principal cerrará el submenú que pudiera estar abierto.
En el ejemplo el primer elemento del menú sería un enlace directo mientras que los otros tres disponen de submenús desplegables.
Las acciones que se han descrito se apoyan en un javascript
que se carga automáticamente con la página y se
ocupa de realizar la tarea de apertura y cierre de los
submenús.
Las reglas CSS se encargan de la apariencia de los diversos elementos y, para construirlos en el código HTML se ha utilizado una lista de definiciones: cada término de definición es un ítem del menú principal, mientras que el submenú son los datos de la definición que están constituidos por una lista que enumera cada uno de los submenús. Como ejemplo, además de consultar el código de la página, tienes a continuación el código correspondiente al cuarto ítem del menú principal:
<dt
onclick="javascript:mostrarsubmenu('smenu4');">Menú
4</dt>
<dd id="smenu4">
<ul>
<li><a
href="#">Submenú
4.1</a></li>
<li><a
href="#">Submenú
4.1</a></li>
</ul>
</dd>
Como puedes ver, el término de
definición contiene una llamada javascript que se activa al
hacer clic que es la encargada de que se muestre el submenú.Si reflexionamos sobre la estructura que se ha utilizado nos damos cuenta de que no es descabellada la utilización de una lista de definiciones, puesto que desde el punto de vista semántico sí que se podría interpretar un menú con submenús desplegables como tal.
Por la propia apariencia visual del menú su
utilización
más habitual será en páginas cuya
estructura
esté basada en marcos, bien sea en marcos puros o en
marcos
internos (iframe).