Cómo crear un menú desplegable HTML y Submenú

Menús desplegables - también conocido como "menús" Suckerfish - utilizar una combinación de HTML y CSS (Cascading Style Sheets) para la estructura y el estilo. La parte HTML de un menú desplegable consiste en listas de viñetas y listas de viñetas anidadas. Después de que el estilo de la barra de menús y de los principales enlaces de navegación en CSS, que el estilo de las listas de viñetas anidadas como submenús. La ": hover" selector de CSS le permite cambiar la propiedad de presentación de un submenú oculto "bloquear" para que vuelva a aparecer.

Instrucciones

1 Código de su menú en HTML usando los "<ul>" y "<li>" etiquetas:

<Ul ID = "Menú">

<Li> <a href="link1.html"> Link 1 </a> </ li>

<Li> <a href="link2.html"> Link 2 </a> </ li>

<Li> <a href="link3.html"> Link 3 </a> </ li>

<Div class = "clearfix"> </ div>

</ Ul>

Añadir un div-fix clara antes del final de la lista. Va a agregar un estilo a la clase "clearfix" para hacer fondo del menú se extienden hacia abajo.

2 Agregue su submenú como una nueva lista desordenada anidado dentro "<li>" etiquetas de su vínculo padre:

<Ul ID = "Menú">

<Li> <a href="link1.html"> Link 1 </a> </ li>

<Li> <a href="link2.html"> Link 2 </a>

<ul>

& Lt; li> & lt; a href = "link1.html"> Link 1 & lt; / a> & lt; / li>

& Lt; li> & lt; a href = "link2.html"> Enlace 2 & lt; / a> & lt; / li>

& Lt; li> & lt; a href = "link3.html"> Link 3 & lt; / a> & lt; / li>

</ Li>

<Li> <a href="link3.html"> Link 3 </a> </ li>

</ Ul>

3 Abra la hoja de estilo, y el estilo de su menú usando CSS. Eliminar tanto las balas y de izquierda guión:

{menú

list-style: none;

padding: 0;

}

Tenga en cuenta que "#menu" coincide con el nombre de identificación del código de ejemplo HTML.

4 Añadir un color de fondo a la barra de menús:

{menú

list-style: none;

padding: 0;

background-color: azul oscuro;

}

5 Flotar los elementos de menú a la izquierda lo que se alinean horizontalmente en la barra de menús:

Menú li {

flotador izquierdo;

}

6 El estilo de los eslabones que conforman los elementos de menú. Añadir el relleno de los enlaces para alinearlos verticalmente en la barra de menú mientras haciéndolos más fáciles de hacer clic en y se ciernen sobre. Debe cambiar la propiedad "pantalla" para "bloquear" para agregar relleno para enlaces:

Menú li a {

bloqueo de pantalla;

padding: 15px 8 píxeles;

text-align: center;

color blanco;

font-weight: bold;

text-decoration: none;

}

Tenga en cuenta que en el "relleno", dos valores se han fijado. El primer valor es el relleno vertical, mientras que los segundos efectos de relleno horizontal.

7 Estilo en el submenú y sus elementos. Primero tiene que colocar el submenú. Retire las balas y el relleno de los submenús, así:

Menú ul {

position: absolute;

list-style: none;

padding: 0;

}

8 Retire los flotadores izquierda desde los elementos de los submenús:

li ul {menú

clear: left;

}

9 Añadir "dsiplay: ninguno" a la regla "#menu ul" para apagar el submenú, ya que no desea que aparezca a menos que el usuario se desplaza sobre el tema de su padre. Hacer que el menú aparece de nuevo utilizando este código:

Menú li: hover {ul

Dipslay: block;

}

10 Agregue la regla de "solución clara" a su div:

.clearfix {

Limpia los dos;

}

Consejos y advertencias

• Añadir destacando a sus elementos de menú cuando el usuario se desplaza sobre ellos. Una regla de estilo para cambiar el color de fondo de un enlace cernía sobre-se parece a "#menu a: hover {}".
• Una vez que termine la construcción de su menú utilizando HTML y CSS, se puede añadir un plugin de jQuery para hacer buenas animaciones para los menús desplegables.