复制代码代码如下:
<% @ page Pageencoding = "UTF-8"
contentType = "text / html; charset = utf-8"%>
<html>
<adal>
<Title> webForm5 </Title>
<style> / * root = horizontal, secondaire = vertical * /
ul # navMenu-h {
marge: 0;
Border: 0 Aucun;
rembourrage: 0;
Largeur: 500px; / * Pour khtml * /
Style de liste: aucun;
hauteur: 24px;
}
ul # navMenu-h li {
marge: 0;
Border: 0 Aucun;
rembourrage: 0;
flottant: à gauche; / * Pour gecko * /
Affichage: en ligne;
Style de liste: aucun;
Position: relative;
hauteur: 24px;
}
ul # navMenu-h ul {
marge: 0;
Border: 0 Aucun;
rembourrage: 0;
Largeur: 160px;
Style de liste: aucun;
Affichage: aucun;
Position: absolue;
En haut: 24px;
à gauche: 0;
}
ul # navMenu-h ul: après / * de ie 7 manque de conformité * / {
Clear: les deux;
Affichage: bloc;
Police: 1Px / 0px Serif;
contenu: ".";
hauteur: 0;
Visibilité: cachée;
}
ul # navMenu-h ul li {
Largeur: 160px;
flottant: à gauche; / * Pour ie 7 manque de conformité * /
Affichage: Bloc! IMPORTANT;
Affichage: en ligne; / * Pour ie * /
}
/ * Menu racine * /
ul # navMenu-h a {
Border: 1px solide #fff;
Border-Right-Color: #CCC;
Border-Bottom-Color: #CCC;
rembourrage: 0 6px;
Float: Aucun! IMPORTANT; / * Pour opéra * /
flottant: à gauche; / * Pour ie * /
Affichage: bloc;
Contexte: #eee;
Couleur: # 666;
Police: Bold 10px / 22px Verdana, Arial, Helvetica, Sans-Serif;
Décoration du texte: aucune;
Hauteur: Auto! IMPORTANT;
hauteur: 1%; / * Pour ie * /
}
/ * Menu racine planer persistance * /
ul # Navmenu-h A: Hover,
UL # NAVMENU-H LI: Hover A,
ul # navMenu-h li.iehover a {
Contexte: #ccc;
Couleur: #FFF;
}
/ * 2ème menu * /
UL # NAVMENU-H LI: Hover Li A,
ul # navMenu-h li.iehover li a {
float: aucun;
Contexte: #eee;
Couleur: # 666;
}
/ * 2ème menu planer persistance * /
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 {
Contexte: #ccc;
Couleur: #FFF;
}
/ * 3ème menu * /
ul # Navmenu-h li: Hover li: hover li a,
ul # Navmenu-h li.iehover li.iehover li a {
Contexte: #eee;
Couleur: # 666;
}
/ * 3rd menu planer persistance * /
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 {
Contexte: #ccc;
Couleur: #FFF;
}
/ * 4ème menu * /
UL # NAVMENU-H LI: Hover Li: Hover Li: Hover Li A,
ul # Navmenu-h li.iehover li.iehover li.iehover li a {
Contexte: #eee;
Couleur: # 666;
}
/ * 4ème menu Hover * /
UL # NAVMENU-H LI: Hover Li: Hover Li: Hover Li A: Hover,
ul # Navmenu-h li.iehover li.iehover li.iehover li a: hover {
Contexte: #ccc;
Couleur: #FFF;
}
ul # Navmenu-h ul,
ul # navmenu-h ul ul {
Affichage: aucun;
Position: absolue;
en haut: 0;
Gauche: 160px;
}
/ * Ne bouge pas - doit venir avant l'affichage: bloc pour gecko * /
ul # Navmenu-h li: Hover ul ul,
ul # navMenu-h li: planer ul ul,
ul # navMenu-h li.iehover ul ul,
ul # navMenu-h li.iehover ul ul {
Affichage: aucun;
}
ul # Navmenu-h li: Hover ul,
ul # Navmenu-h ul li: Hover ul,
ul # navMenu-h ul li: planer ul,
ul # Navmenu-h li.iehover ul,
ul # navMenu-h ul li.iehover ul,
ul # navMenu-h ul li.iehover ul {
Affichage: bloc;
}
</ style> <script linguisse = "javascript">
navhover = function () {
var lis = document.getElementById ("navMenu-h"). GetElementsByTagName ("li");
pour (var i = 0; i <lis.length; i ++) {
lis [i] .onMouseOver = function () {
this.classname + = "iehover";
}
lis [i] .onMouseout = function () {
this.classname = this.classname.replace (new regexp ("iehover // b"),
"");
}
}
}
if (window.attachevent) window.attachevent ("onload", navhover);
</cript>
</ 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>
</docy>
</html>