Tecnología

Inicio

Cómo hacer un menú desplegable horizontal en HTML

December 24

Cómo hacer un menú desplegable horizontal en HTML


la navegación tradicional en los sitios web que normalmente muestran los elementos de menú con un menú desplegable que aparece en la pantalla verticalmente, pero ¿cómo hacer caer horizontalmente si el diseño de su sitio lo requiere? Dado que HTML no basta para justificar gota horizontal menús desplegables, tendrá que usar Cascading Style Sheets (CSS) para hacer esto posible. CSS le permite trazar la posición de los elementos de una página, como elementos de navegación, por lo que es posible que usted pueda implementar un menú no tradicional horizontal desplegable que aparece en su sitio web.

Instrucciones

1 Abra un editor HTML o el Bloc de notas y escribe a cabo su estructura de la página HTML:

<Head>

Cabeza de contenidos

</ Head>

<Body>

contenido del cuerpo aquí.

</ Body>

2 El tipo en su estructura de menú usando las etiquetas de lista sin ordenar dentro de la etiqueta <body>. Para construir submenús, hacer 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>

&lt;li>&lt;a href="appetizers.html">Appetizers&lt;/a>&lt;/li>

& Lt; li> & lt; a href = "entr y eacute; es.html"> Entr y eacute; es & lt; / a>

& Lt; ul>

& Lt; li> & lt; a href = "meat.html"> Carne & lt; / a> & lt; / li>

& Lt; li> & lt; a href = "seafood.html"> Seafood & lt; / a> & lt; / li>

& Lt; li> & lt; a href = "pasta.html"> Pasta & lt; / a> & lt; / li>

& Lt; / ul>

& Lt; / li>

</ Ul>

3 Type en su hoja de estilo dentro de las etiquetas <head> del documento HTML. Para comenzar el código CSS, utilice <style>:

<Style>

código CSS aquí.

</ Style>

4 Retire el estilo predeterminado de la lista desordenada como viñetas y sangrías, usando el siguiente código CSS:

ul {

list-style: none;

Anchura: 100px;

margin: 0;

padding: 0;

}

Especificar el ancho de su menú usando el atributo "ancho".

5 Ajuste la posición de su menú principal de "relativa".

ul li {

position: relative;

}

6 Definir la posición del submenú para hacer que aparece junto a su elemento padre:

li ul {

display: none;

position: absolute;

izquierda: 99px;

top: 0;

}

7 Añadir una propiedad vuelo estacionario. Esto permite que el sub-menú en "desplegable" horizontalmente cuando el ratón sobre el elemento del menú principal.

li: hover {ul

display: block;

}

Consejos y advertencias

  • Se puede elegir el estilo de su menú mediante la adición de color y las fronteras de los elementos del menú a través de CSS.
  • Como parte de código CSS puede aparecer de manera diferente en diferentes navegadores, especialmente Internet Explorer, probar el código en varios navegadores para ver cualquier discrepancia. Es posible que tenga que modificar su código de hacer que parezca uniforme en los diferentes navegadores.