Cómo hacer un menú desplegable horizontal en HTML

Escrito por cristina puno | Traducido por enrique pereira vivas
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo hacer un menú desplegable horizontal en HTML
Un sitio de navegación desplegable horizontal se puede lograr utilizando HTML y CSS. (Hemera Technologies/Photos.com/Getty Images)

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.

Nivel de dificultad:
Moderadamente difícil

Otras personas están leyendo

Instrucciones

  1. 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>

  2. 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>

  3. 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>

  4. 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".

  5. 5

    Establece la posición de tu menú principal a "relativa".

    ul li { position: relative; }

  6. 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; }

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

Consejos y advertencias

  • Puedes elegir el estilo de tu menú, agregando color y los bordes de los elementos del menú a través de CSS.
  • Dado a que parte del código CSS puede mostrarse de forma diferente en distintos navegadores, especialmente Internet Explorer, prueba tu código en varios navegadores para ver las discrepancias. Es posible que tengas que modificar tu código para que parezca uniforme en los diferentes navegadores.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles