复制代码代码如下:
<%@página PageEncoding = "UTF-8"
contentType = "text/html; charset = utf-8" %>
<html>
<Evista>
<title> webform5 </title>
<syle>/ * root = horizontal, secundario = vertical */
UL#Navmenu-H {
margen: 0;
borde: 0 ninguno;
relleno: 0;
Ancho: 500px; /*Para khtml*/
Estilo de lista: Ninguno;
Altura: 24px;
}
UL#Navmenu-H Li {
margen: 0;
borde: 0 ninguno;
relleno: 0;
flotante: izquierda; /*Para gecko*/
Pantalla: en línea;
Estilo de lista: Ninguno;
Posición: relativo;
Altura: 24px;
}
ul#navmenu-h ul {
margen: 0;
borde: 0 ninguno;
relleno: 0;
Ancho: 160px;
Estilo de lista: Ninguno;
Pantalla: ninguno;
Posición: Absoluto;
arriba: 24px;
Izquierda: 0;
}
UL#Navmenu-H ul: After /*de IE 7 Falta de cumplimiento* /{
claro: ambos;
Pantalla: bloque;
fuente: 1px/0px serif;
contenido: ".";
Altura: 0;
Visibilidad: oculto;
}
ul#navmenu-h ul li {
Ancho: 160px;
flotante: izquierda; /*Por IE 7 falta de cumplimiento*/
Pantalla: ¡Bloque! Importante;
Pantalla: en línea; /*Para IE*/
}
/ * Menú raíz */
ul#navmenu-h a {
borde: 1px sólido #fff;
border-derecho-color: #ccc;
color-fondo de borde: #ccc;
relleno: 0 6px;
FLOAT: ¡Ninguno! Importante; /*Para ópera*/
flotante: izquierda; /*Para IE*/
Pantalla: bloque;
Antecedentes: #EEE;
Color: #666;
Font: Bold 10px/22px Verdana, Arial, Helvetica, Sans-Serif;
Decoración de texto: ninguna;
Altura: Auto! IMPORTANTE;
Altura: 1%; /*Para IE*/
}
/ * Menú de raíz Persistencia */
UL#Navmenu-H A: Hover,
UL#Navmenu-H Li: Hover A,
UL#Navmenu-H Li.ieHover a {
Antecedentes: #ccc;
Color: #fff;
}
/ * 2do menú */
UL#Navmenu-H Li: Hover Li A,
UL#Navmenu-H Li.ieHover Li A {
flotante: ninguno;
Antecedentes: #EEE;
Color: #666;
}
/ * 2do menú Rover Persistence */
UL#Navmenu-H Li: Hover Li A: Hover,
UL#Navmenu-H Li: Hover Li: Hover A,
UL#Navmenu-H Li.ieHover Li A: Hover,
ul#navmenu-h li.iehover li.iehover a {
Antecedentes: #ccc;
Color: #fff;
}
/ * 3er menú */
UL#Navmenu-H Li: Hover Li: Hover Li A,
ul#navmenu-h li.iehover li.iehover li a {
Antecedentes: #EEE;
Color: #666;
}
/ * 3er menú Rover persistencia */
UL#Navmenu-H Li: Hover Li: Hover Li A: Hover,
UL#Navmenu-H Li: Hover Li: Hover Li: Hover A,
UL#Navmenu-H Li.ieHover Li.ieHover Li A: Hover,
ul#navmenu-h li.iehover li.iehover li.iehover a {
Antecedentes: #ccc;
Color: #fff;
}
/ * 4to menú */
UL#Navmenu-H Li: Hover Li: Hover Li: Hover Li A,
ul#navmenu-h li.iehover li.iehover li.iehover li a {
Antecedentes: #EEE;
Color: #666;
}
/ * 4to menú Rover */
UL#Navmenu-H Li: Hover Li: Hover Li: Hover Li A: Hover,
ul#navmenu-h li.iehover li.iehover li.iehover li a: hover {
Antecedentes: #ccc;
Color: #fff;
}
ul#navmenu-h ul,
ul#navmenu-h ul ul {
Pantalla: ninguno;
Posición: Absoluto;
arriba: 0;
Izquierda: 160px;
}
/ * No se mueva - debe venir antes de la pantalla: bloque para gecko */
UL#Navmenu-H Li: Hover Ul,
UL#Navmenu-H Li: Hover ul ul,
UL#Navmenu-H Li.ieHover Ul,
ul#navmenu-h li.iehover ul ul {
Pantalla: ninguno;
}
UL#Navmenu-H Li: Hover UL,
UL#Navmenu-H ul Li: Hover UL,
ul#navmenu-h ul ul li: hover ul,
UL#Navmenu-H Li.ieHover UL,
UL#Navmenu-H ul Li.ieHover UL,
UL#Navmenu-H ul ul Li.ieHover ul {
Pantalla: bloque;
}
</style> <script language = "javaScript">
Navhover = function () {
var lis = document.getElementById ("navmenu-h"). getElementsBytagName ("li");
para (var i = 0; i <lis.length; i ++) {
lis [i] .onmouseover = function () {
this.classname+= "iehover";
}
lis [i] .onmouseout = function () {
this.classname = this.classname.replace (nuevo regexp ("iehover // b"),
"");
}
}
}
if (window.attachevent) window.attachevent ("onload", navhover);
</script>
</ablo>
<Body>
<ul id = "navmenu-h">
<li> <a href = "#"> Root Nav item1 </a>
<ul>
<li> <a href = "#"> Sub NAV elemento1 </a> </li>
<li> <a href = "#"> Sub NAV item1-2 </a> </li>
</ul>
</li>
<li> <a href = "#"> Root Nav item2 </a>
<ul>
<li> <a href = "#"> Sub NAV item2 </a> </li>
<li> <a href = "#"> Sub NAV item2-2 </a> </li>
</ul>
</li>
<li> <a href = "#"> Root Nav item3 </a>
<ul>
<li> <a href = "#"> Sub NAV item3 </a> </li>
<li> <a href = "#"> Sub NAV item3-2 </a> </li>
</ul>
</li>
</ul>
</body>
</html>