Código en HTML para un menú desplegable vertical

Por warren davies
Código en HTML para un menú desplegable vertical
Comstock/Comstock/Getty Images

Puedes guardar espacio en tu sitio web usando menús desplegables. Éstos contienen una lista de opciones "padres" y cuando el usuario pasa el ratón sobre el objeto, todos los "hijos" aparecen en la página. Este tipo de menú puede hacerse con un solo archivo de HTML, o como parte del manejo de contenido del sistema añadiendo código CSS a la hoja de estilo principal en CSS.

Creando la hoja de estilo

Si quieres que el menú vaya en un archivo autónomo de HTML, debes hacer un espacio entre las etiquetas y en donde irá el código CSS. Escribe lo siguiente en tu archivo.

El espacio entre estas dos etiquetas es tu hoja de estilo. Si estás usando un archivo CSS separado, añade lo siguiente en algún lugar entre las etiquetas de "head":

Luego crea un archivo llamado "style.css", que será tu hoja de estilo. Mantén la hoja de estilo en el mismo directorio que el archivo principal de HTML.

Creando el menú

Debes crear una etiqueta que contenga

para que el menú vaya dentro de ellas. Agrega lo siguiente a tu página de HTML en la ubicación en que quieres que vaya el menú:

Luego debes definir el divisor del menú. Añade el siguiente código a tu hoja de estilo:

menu {

width: 200px; }

Añade a esta entrada cualquier otro estilo CSS que desees que el divisor tenga; por ejemplo, un color de fondo, bordes, o un tamaño diferente.

Marcado HTML

Añade el código para el menú. El menú usará una lista desordenada:

    . Añade el siguiente código entre las etiquetas
    para tu menú.

    Nota que las etiquetas

      de los sub-menús están entre las etiquetas
    • y
    • para "Elemento 1 del menú". Esto le dice al buscador que el sub-menú está contenido debajo de ese elemento del menú. Adapta el código de arriba para representar tu propio menú, añadiendo tus propios URL y sub-menús adicionales si es necesario

      Estilo CSS

      En este punto, el menú aparecerá pero el sub-menú se mostrará siempre. Sólo necesitas usar el atributo "display" para esconder y revelar el sub-menú. Añade lo siguiente a tu hoja de estilo:

      menu li {position: relative;}

      menu ul ul {

      position: absolute; top: 0; left: 100%; width: 100px; } div#menu ul ul {display: none;} div#menu ul li:hover ul {display: block;}

      Guarda todos los archivos. Tu menú desplegable está listo.