Comentario: A menudo encuentro la navegación desplegable al navegar por páginas web. Recuerdo que solía implementarlo usando JS. Sin embargo, lo que quiero presentar a continuación en este artículo es implementarlo utilizando CSS3+HTML5. Si está interesado, no se lo pierda. Espero que sea útil para usted aprender CSS3 después de leerlo.
Las representaciones son las siguientes:El código es el siguiente:
<! Doctype html>
<html>
<Evista>
<meta charset = "utf-8" />
<title> puro HTML+CSS Navigation </title>
<!-Mulder->
<!-Qq: 10221408->
<!-Solo apoya a Chrome Firefox->
<estilo>
*{
margen: 0;
relleno: 0;
}
.clar: después de {
claro: ambos;
contenido: ".";
Pantalla: bloque;
Altura: 0;
Visibilidad: oculto;
}
Nav {
Pantalla: bloque en línea;
borde: 1px sólido #505255;
Border-Bottom: 1px Solid #282C2F;
-Moz-Border-Radius: 5px;
-WebKit-Border-Radius: 5px;
margen: 50px;
-webkit-box-shadow: 1px 1px 3px #292929;
-moz-box-shadow: 1px 1px 3px #292929;
}
li {
Estilo de lista: Ninguno;
flotante: izquierda;
Border-Right: 1px Solid #2E3235;
Posición: relativo;
/*Antecedentes: -Moz-Linear-Dinter (arriba, #FFF, #555D5F 2%, #555D5F 50%, #3E4245 100%);
Antecedentes: -WebKit-Gradient (lineal, 0 0, 0 100%, de (#ffff), color-stop (2%, #555d5f), color-stop (50%, #555d5f), a ( #3e4245));*/
Antecedentes:#555D5F;
}
Li: Hover {
/*Antecedentes: -Moz-Lineal-Dinter (arriba, #FFF, #3E4245 2%, #555D5F 80%, #555D5F 100%);
Antecedentes: -webkit-gradiente (lineal, 0 0, 0 100%, de (#ffff), color-stop (2%, #3e4245), color-stop (80%, #3e4245), a ( #555d5f));*/
Antecedentes:#3E4245;
-Moz-Transition: Background 1s Fase-Out;
-WebKit-Transition: Background 1s Fase-Out;
}
li a {
Pantalla: bloque;
Altura: 40px;
Línea de altura: 40px;
relleno: 0 30px;
tamaño de fuente: 12px;
Color: #ffff;
Shadow de texto: 0px -1px 0px #000;
Decoración de texto: ninguna;
White-Space: Nowrap;
Border-izquierda: 1px Solid #999E9F;
Border-top: 1px Solid #999E9F;
-Moz-border-top-izquierda-radio: 2px;
-Webkit-border-top-left-radius: 2px;
Índice Z: 100;
}
li> a {
Posición: relativo;
}
li.first a {
-Moz-Border-Radius-Topleft: 4px;
-Moz-Border-Radius-Bottomleft: 4px;
-Webkit-border-top-left-radius: 4px;
-WebKit-Border-Bottom-Left-Radius: 4px;
}
li.last {
Border-Right: 0 Ninguno;
}
dl {
Posición: Absoluto;
Pantalla: bloque;
Arriba: 40px;
Izquierda: -25px;
Ancho: 165px;
Antecedentes:#222222;
-Moz-Border-Radius: 5px;
-WebKit-Border-Radius: 5px;
-webkit-box-shadow: 1px 1px 3px #292929;
-Moz-box-shadow: 1px 1px 3px #292929;
Índice Z: 10;
}
Li: Hover DL {
Arriba: 50px;
Pantalla: bloque;
Ancho: 145px;
relleno: 10px;
}
dl a {
Antecedentes: transparente;
borde: 0 ninguno;
-Moz-Border-Radius: 5px;
-WebKit-Border-Radius: 5px;
-Moz-Transition: antecedentes 0.5s aliviados;
-WebKit-Transition: antecedentes de 0.5s aliviados;
índice z: 50;
}
DL A: Hover {
Color: #fff;
Antecedentes:#999E9F;
-Moz-Transition: Fondo de 0.3s Fase-In, color 0.3s Facilizados;
-WebKit-Transition: fondo 0.3s Facilizados, color 0.3s Facilizados;
}
DD {
margen-top: -40px;
Opacidad: 0;
Ancho: 145px;
-Webkit-transition-property: todos;
/*-WebKit-transición-duración-función: cúbico-bezier (5,0,5,0);*/
-Moz-Transition-Property: todos;
/*-Moz-Transition-Timing-Function: Cubic-Bezier (5,0,5,0);*/
/*-WebKit-Transition-Delay: 5s;
-Moz-Transition-Delay: 5s;*/
}
Li: Hover DD {
margen-top: 0;
Opacidad: 1;
}
li dd: nth-child (1) {
-Webkit-transición-duración: 0.1s;
-Moz-transición-duración: 0.1s;
}
li dd: nth-child (2) {
-Webkit-transición-duración: 0.2s;
-Moz-transición-duración: 0.2s;
}
li dd: nth-child (3) {
-Webkit-transición-duración: 0.3s;
-Moz-transición-duración: 0.3s;
}
li dd: nth-child (4) {
-Webkit-transición-duración: 0.4s;
-Moz-transición-duración: 0.4s;
}
dt {
Pantalla: ninguno;
margen-top: -25px;
Top-top: 15px;
Altura: 10px;
}
li: hover dt {
Pantalla: bloque;
}
.Darrow {
flotante: correcto;
margen: 18px 10px 0 0;
ancho fronterizo: 5px;
border-color: #fff transparente transparente transparente;
estilo fronterizo: sólido;
Ancho: 0;
Altura: 0;
Línea de altura: 0;
desbordamiento: oculto;
cursor: puntero;
Shadow de texto: 0px -1px 0px #000;
-webkit-box-shadow: 0px -1px 0px #000;
-Moz-box-shadow: 0px -1px 0px #000;
}
.flecha{
margen: 0 auto;
margen-top: -5px;
Pantalla: bloque;
Ancho: 10px;
Altura: 10px;
Antecedentes:#222222;
-WebKit-Transform: Rotate (45deg);
-Moz-Transform: Rotate (45deg);
}
</style>
</ablo>
<Body>
<Arr>
<ul>
<li> <a href = "#"> menú uno </a> </li>
<li>
<span> </span>
<a href = "#"> menú dos </a>
<dl>
<dt> <span> </span> </dt>
<dd> <a href = "#"> submenu One </a> </dd>
<dd> <a href = "#"> submenu 2 </a> </dd>
<dd> <a href = "#"> submenu tres submenu tres </a> </dd>
</dl>
</li>
<li>
<span> </span>
<a href = "#"> menú tres </a>
<dl>
<dt> <span> </span> </dt>
<dd> <a href = "#"> submenu One </a> </dd>
<dd> <a href = "#"> submenu 2 </a> </dd>
<dd> <a href = "#"> submenu tres submenu tres </a> </dd>
</dl>
</li>
<li>
<span> </span>
<a href = "#"> menú cuatro </a>
<dl>
<dt> <span> </span> </dt>
<dd> <a href = "#"> submenu One </a> </dd>
<dd> <a href = "#"> submenu 2 </a> </dd>
<dd> <a href = "#"> submenu tres </a> </dd>
<dd> <a href = "#"> submenu cuatro </a> </dd>
</dl>
</li>
<li> <a href = "#"> menú cinco </a> </li>
<li> <a href = "#"> hombres vi </a> </li>
<li> <a href = "#"> menú siete </a> </li>
<li> <a href = "#"> menú 8 </a> </li>
</ul>
</am>
</body>
</html>