Cómo hacer submenús en HTML

Los menús HTML simples se basan en listas desordenadas. Las listas son entonces convertidos en los menús más complejas usando CSS (Cascading Style Sheets) código. Submenús se añaden por listas desordenadas nido en el interior elementos de la lista. Mientras un menú básico de estilo barra lateral podría mostrar un submenú como una lista sangrada de enlaces, también puede hacer que funcionen como menús desplegables para las barras de menús horizontales. La técnica para submenús desplegables es compleja, pero se puede hacer totalmente en CSS.

Instrucciones

1 Abra la página Web en un editor como el Bloc de notas y encontrar el código de menú:

<Ul ID = "Menú">
<Li> <a href="page1.html"> la página una </a> </ li>
<Li> <a href="page2.html"> Página Dos </a> </ li>
<Li> <a href="page3.html"> página tres </a> </ li>
<Li> <a href="page4.html"> página cinco </a> </ li>
</ Ul>

Los menús son por lo general codifican como listas desordenadas, como se muestra en el ejemplo anterior.

2 Anidar una nueva lista desordenada dentro de los "<li>" etiquetas para su elemento de nivel superior:

<Ul ID = "Menú">
<Li> <a href="page1.html"> la página una </a> </ li>
<Li> <a href="page2.html"> Página Dos </a>

<ul>
<li><a href=”page2a.html”>Page Two-A</a></li>
<li><a href=”page2b.html”>Page Two-B</a></li>
</ul>

</ Li>
<Li> <a href="page3.html"> página tres </a> </ li>
<Li> <a href="page4.html"> página cinco </a> </ li>
</ Ul>

3 Abra la hoja de estilo de su sitio web y escribir una nueva regla de estilo para los anidados "<ul>" etiquetas. Ajuste la posición del submenú de "absoluta":

Menú ul {

position: absolute;
}

Esto mantiene un submenú desplegable de empujar otros contenidos abajo en la página. El submenú lugar flotar en la superficie del contenido de la página.

4 Escribir una nueva regla de estilo para los elementos de la lista en el submenú. Desactive la izquierda flotante que hace que una barra horizontal para que sus elementos de submenú tendrá lugar apilar verticalmente hacia abajo:

li ul {menú

Limpia los dos;
Anchura: 200px;
}

Añadir una anchura, como se muestra, si lo desea. De lo contrario, el submenú se estira para adaptarse a sus artículos.

5 Crear una regla de estilo que afecta al submenú cuando un usuario pasa el puntero del ratón sobre su elemento ascendiente. Ajuste pantalla a "bloque" por lo que el submenú se mostrará en un vuelo estacionario:

Menú li: hover {ul

bloqueo de pantalla;
}

6 Volver a la regla de estilo para el submenú y hacer que se oculta de forma predeterminada:

Menú ul {

position: absolute;
display: none;
}

Ahora, un visitante del sitio debe colocar el cursor sobre el elemento padre del submenú para que aparezca el submenú. Al pasar de distancia lo hace desaparecer de nuevo.

Consejos y advertencias

• Si va a crear un sencillo menú de estilo barra lateral que incluye listas de enlaces, entonces no es necesario ir más allá de la segunda etapa. Nido de la lista desordenada para el submenú y estilo con una muesca: #menu ul {padding-left: 20px; }