Cómo hacer un menú desplegable horizontal en HTML (En 7 Pasos)
La navegación tradicional en los sitios web normalmente muestra los elementos de un menú con un menú desplegable que aparece verticalmente en la pantalla, pero ¿cómo hacer que éstos caigan horizontalmente si el diseño de tu sitio lo requiere? Dado que HTML por sí solo no es compatible con los menús desplegables en forma horizontal, tendrás que usar hojas de estilo en cascada (CSS, por sus siglas en inglés) para que esto sea posible. CSS te permite trazar la posición de los elementos en una página, como los elementos de navegación, lo que hace posible que puedas implementar un no-tradicional menú horizontal desplegable en tu página web.
Paso 1
Abre un editor de HTML o el Bloc de notas y escribe la estructura de tu página
Head contents here Body contents here.Paso 2
Escribe tu estructura de menú utilizando etiquetas de lista no ordenadas dentro de las etiquetas HTML
. Para crear sub-menús, haz una lista desordenada dentro del elemento de la lista principal. El código siguiente es un ejemplo de una estructura de menú con un submenú:Paso 3
Escribe tu hoja de estilo dentro de las etiquetas
de tu documento HTML. Para iniciar el código CSS, utiliza etiquetasPaso 4
Retira el estilo por defecto de la lista desordenada como viñetas y sangrías, utilizando el siguiente código CSS:
ul { list-style: none; width: 100px; margin: 0; padding: 0; }
Especifica el ancho de tu menú utilizando el atributo de "ancho".
Paso 5
Establece la posición de tu menú principal a "relativa".
ul li { position: relative; }
Paso 6
Define la posición del sub-menú para que aparezca al lado de su elemento principal:
li ul { display: none; position: absolute; left: 99px; top: 0; }
Paso 7
Agrega una propiedad de suspensión. Esto activará el sub-menú de "desplegable" de manera horizontal al pasar el mouse sobre el elemento del menú principal.
li:hover ul { display: block; }
