复制代码代码如下:
<%@Page PageEncoding = "UTF-8"
contentType = "Texto/html; charset = utf-8" %>
<html>
<head>
<title> webform5 </title>
<estilo>/ * root = horizontal, secundário = vertical */
ul#Navmenu-h {
margem: 0;
fronteira: 0 Nenhum;
preenchimento: 0;
Largura: 500px; /*Para khtml*/
estilo de lista: nenhum;
Altura: 24px;
}
ul#Navmenu-h li {
margem: 0;
fronteira: 0 Nenhum;
preenchimento: 0;
flutuar: esquerda; /*Para Gecko*/
exibição: embutido;
estilo de lista: nenhum;
Posição: relativa;
Altura: 24px;
}
ul#Navmenu-h ul {
margem: 0;
fronteira: 0 Nenhum;
preenchimento: 0;
Largura: 160px;
estilo de lista: nenhum;
Exibir: Nenhum;
Posição: Absoluto;
topo: 24px;
Esquerda: 0;
}
Ul#Navmenu-h ul: depois /*do IE 7 Falta de conformidade* /{
claro: ambos;
exibição: bloco;
Fonte: 1px/0px serif;
contente: ".";
altura: 0;
Visibilidade: escondida;
}
Ul#Navmenu-h ul li {
Largura: 160px;
flutuar: esquerda; /*Para o IE 7 falta de conformidade*/
Exibir: bloco! IMPORTANTE;
exibição: embutido; /*Para ie*/
}
/ * Menu raiz */
ul#Navmenu-h a {
borda: 1px sólido #fff;
cor-direita: #ccc;
cor-cor de fronteira: #ccc;
preenchimento: 0 6px;
Float: Nenhum! IMPORTANTE; /*Para ópera*/
flutuar: esquerda; /*Para ie*/
exibição: bloco;
Antecedentes: #eee;
Cor: #666;
Fonte: Bold 10px/22px Verdana, Arial, Helvetica, Sans-Serif;
Decoração de texto: Nenhum;
Altura: Auto! IMPORTANTE;
altura: 1%; /*Para ie*/
}
/ * Menu raiz Passeie a persistência */
Ul#Navmenu-H A: Passe, Passe,
Ul#Navmenu-H li: Passe A,
ul#Navmenu-h li.iehover a {
Antecedentes: #ccc;
Cor: #FFF;
}
/ * 2º menu */
Ul#Navmenu-H li: Hover Li A,
ul#Navmenu-h li.iehover li a {
flutuar: nenhum;
Antecedentes: #eee;
Cor: #666;
}
/ * 2º Menu Passeio Passeio */
Ul#Navmenu-H Li: Passe Li A: Passe, Passe,
Ul#Navmenu-H li: Passe o mouse Li: Passe A,
ul#Navmenu-h li.iehover li a: pairar,
ul#Navmenu-h li.iehover li.iehover a {
Antecedentes: #ccc;
Cor: #FFF;
}
/ * 3º menu */
Ul#Navmenu-H Li: Hover Li: Hover Li A,
ul#Navmenu-h li.iehover li.iehover li a {
Antecedentes: #eee;
Cor: #666;
}
/ * 3º Menu Passeio Passeio */
Ul#Navmenu-H Li: Passe o Roubo: Passe Li A: Passe, Passe,
Ul#Navmenu-H Li: Hover Li: Passe Li: Passe A,
ul#Navmenu-h li.iehover li.iehover li a: pairar,
ul#Navmenu-h li.iehover li.iehover li.iehover a {
Antecedentes: #ccc;
Cor: #FFF;
}
/ * 4º menu */
Ul#Navmenu-H Li: Hover Li: Hover Li: Hover Li A,
ul#Navmenu-h li.iehover li.iehover li.iehover li a {
Antecedentes: #eee;
Cor: #666;
}
/ * 4º Menu Passe o Mirse */
Ul#Navmenu-H Li: Passe o Hover Li: Hover Li: Hover Li A: Passe o Maindo,
ul#Navmenu-h li.iehover li.iehover li.iehover li a: hover {
Antecedentes: #ccc;
Cor: #FFF;
}
Ul#Navmenu-H ul ul,
Ul#Navmenu-H Ul ul {
Exibir: Nenhum;
Posição: Absoluto;
topo: 0;
Esquerda: 160px;
}
/ * Não se mova - deve vir antes da exibição: Block for Gecko */
Ul#Navmenu-H Li: Hover ul Ul,
Ul#Navmenu-H li: Hover ul ul Ul,
ul#Navmenu-h li.iehover ul ul,
ul#Navmenu-h li.iehover ul ul ul {
Exibir: Nenhum;
}
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 {
exibição: bloco;
}
</style> <script linguage = "javascript">
Navhover = function () {
var lis = document.getElementById ("Navmenu-h"). getElementsByTagName ("li");
for (var i = 0; i <lis.length; i ++) {
lis [i] .onMouseOver = function () {
this.className+= "iehover";
}
lis [i] .onMouseOut = function () {
this.className = this.classname.replace (novo regexp ("iehover // b"),
"");
}
}
}
if (window.attachevent) window.attachevent ("Onload", naves naval);
</script>
</head>
<Body>
<ul id = "Navmenu-h">
<li> <a href = "#"> root nav item1 </a>
<ul>
<li> <a href = "#"> sub Nav Item1 </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>