Cómo hacer un menú desplegable horizontal en HTML

Un sitio de navegación desplegable horizontal se puede lograr utilizando HTML y CSS.
Por cristina puno

Paso 1

Abre un editor de HTML o el Bloc de notas y escribe la estructura de tu página <head> Head contents here </head> <body> Body contents here. </body>


Paso 2

Escribe tu estructura de menú utilizando etiquetas de lista no ordenadas dentro de las etiquetas HTML <body>. 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ú:

<ul> <li><a href="appetizers.html">Appetizers</a></li> <li><a href="entrées.html">Entrées</a> <ul> <li><a href="meat.html">Meat</a></li> <li><a href="seafood.html">Seafood</a></li> <li><a href="pasta.html">Pasta</a></li> </ul> </li> </ul>


Paso 3

Escribe tu hoja de estilo dentro de las etiquetas <head> de tu documento HTML. Para iniciar el código CSS, utiliza etiquetas <style>:

<style> CSS code here. </style>


Paso 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; }