Con la ayuda de un buen código HTML y reglas CSS simples, puede crear un bonito menú emergente que se puede modificar y complementar fácilmente. Mediante el uso de lenguaje de marcado y hojas de estilo en cascada, puede asegurarse de que los menús funcionen correctamente en todos los navegadores.
Instrucciones
Paso 1
Primero, construya la estructura básica de su menú. Abra un editor de texto y cree una lista numerada con un submenú que actúa como un elemento de la lista principal. Por ejemplo:
-
Primer elemento
- Elemento desplegable
- Menú desplegable2
Paso 2
Guarde la lista generada en un archivo html separado. A continuación, cree un archivo con extensión.css e ingrese todos los parámetros de la hoja de estilo.
Paso 3
Elimine cualquier relleno y viñetas que se apliquen en la lista de viñetas y establezca el ancho del menú usando las herramientas CSS: ul {list-style: none;
ancho: 200px; }
Paso 4
Establezca la posición relativa de todos los elementos de la lista utilizando el atributo de posición: ul li {posición: relativa; }
Paso 5
A continuación, debe diseñar un submenú, cada uno de cuyos elementos aparecerá a la derecha del menú principal en el momento en que el puntero del mouse esté sobre el elemento: li ul {posición: absoluta;
izquierda: 199px;
arriba: 0;
pantalla: ninguna; } El atributo de la izquierda es un píxel menos que el ancho del menú en sí. Esto permite que los elementos emergentes se coloquen de forma inteligente sin crear bordes dobles. El atributo de visualización se utiliza para ocultar el submenú al abrir la página.
Paso 6
Diseñe los enlaces como desee utilizando las opciones de CSS adecuadas. Incluya el parámetro display: block para que cada enlace ocupe todo el espacio que le ha reservado.
Paso 7
Para que el menú aparezca en el momento en que el cursor está sobre él (desplazarse), debe ingresar el código: li: hover ul {display: block; }
Paso 8
Configure opciones adicionales para mostrar enlaces y elementos de lista como desee.
Paso 9
El menú emergente está listo. Ahora queda incluir el atributo en el archivo.html: menú emergente
