Con la ayuda de un código HTML competente y reglas CSS simples, puede crear un menú emergente, complementarlo y modificarlo. Al utilizar las tablas en cascada y las herramientas de lenguaje de marcado, puede asegurarse de que el menú funcione correctamente en todos los navegadores.
Instrucciones
Paso 1
Primero, manténgase en la barra de menú básica. Cree una lista numerada especial con un submenú en un editor de texto. Por lo general, se utiliza "Bloc de notas" para estos fines. El submenú actúa como un elemento de la lista principal. Por ejemplo: First ElementFlood ElementFlood Element2Field Element3Field Element4Field Element5
Paso 2
Guarde esta lista en un archivo html separado. Luego crea un archivo.css. Ingrese todos los parámetros requeridos de la hoja de estilo. Haga esto con mucho cuidado, porque un error y el menú emergente no se mostrará correctamente o no funcionará en absoluto.
Paso 3
Elimine las viñetas y el relleno aplicados en la lista de viñetas. Establezca el ancho del menú usando herramientas CSS: ul -style: none; width: 200px; }
Paso 4
Marque la posición relativa de todos los elementos de la lista con un atributo llamado posición: ul li: relativo; }
Paso 5
Luego organice el submenú, cuyos elementos aparecerán desde el menú principal a la derecha cuando el cursor del mouse esté sobre el elemento: li ul: absolute; left: 199px; top: 0; display: none; }
Paso 6
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 correctamente sin crear bordes dobles. El atributo de visualización se utiliza para ocultar el submenú al abrir la página.
Paso 7
Diseñe los enlaces según sea necesario utilizando las opciones CSS adecuadas. Incluya el parámetro display: block para que los enlaces ocupen todo el espacio reservado para ellos. Para que el menú aparezca cuando el cursor del mouse se desplaza sobre él, ingrese el siguiente código: li: hover ul: block; }
Paso 8
Establezca opciones adicionales para mostrar elementos de lista y enlaces como desee. Incluya un atributo en el archivo.html. El menú emergente está listo para usarse.
