Código en HTML para un menú desplegable vertical
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
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
- Elemento 1 del menú
- 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
Nota que las etiquetas
- de los sub-menús están entre las etiquetas
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.
