复制代码代码如下：
<％@page cagecoding =“ utf-8”
contentType =“ text/html; charset = utf-8”％>
<html>
<头>
<title> WebForm5 </title>
<样式>/ * root =水平，次级=垂直 */
ul＃navmenu-h {
保证金：0;
边界：0无；
填充：0;
宽度：500px; /*对于khtml*/
列表风格：无；
身高：24px;
}
ul＃navmenu-h li {
保证金：0;
边界：0无；
填充：0;
浮子：左； /*gecko*/
显示：内联；
列表风格：无；
位置：相对；
身高：24px;
}
ul＃navmenu-h ul {
保证金：0;
边界：0无；
填充：0;
宽度：160px;
列表风格：无；
显示：无；
位置：绝对；
顶部：24px;
左：0;
}
UL＃NAVMENU-H UL： /*从IE 7开始缺乏合规性* /{
清晰：两者;
显示：块;
字体：1PX/0PX Serif;
内容： ”。”;
身高：0;
可见性：隐藏；
}
ul＃navmenu-h ul li {
宽度：160px;
浮子：左； /*对于7缺乏合规性*/
显示：块！重要；
显示：内联； /*对于IE*/
}
/ *根菜单 */
ul＃navmenu-h a {
边界：1PX实心#FFF;
边境权利彩色：#ccc;
边界底彩：#ccc;
填充：0 6px;
float：没有！重要； /*for Opera*/
浮子：左； /*对于IE*/
显示：块;
背景：#eee;
颜色：＃666;
字体：粗体10px/22px Verdana，Arial，Helvetica，sans-serif;
文本介绍：无；
身高：自动！
身高：1％； /*对于IE*/
}
/ *根菜单悬停持久性 */
ul＃navmenu-h a：悬停，
ul＃navmenu-h li：悬停A，
ul＃navmenu-h li.iehover a {
背景：#ccc;
颜色：#fff;
}
/ *第二菜单 */
ul＃navmenu-h li：悬停
ul＃navmenu-h li.iehover li a {
浮点：无；
背景：#eee;
颜色：＃666;
}
/ *第二菜单悬停持久性 */
UL＃NAVMENU-H LI：HOVER LI A：悬停
Ul＃Navmenu-H Li：Hover Li：Hover A，
ul＃navmenu-h li.iehover li a：悬停
ul＃navmenu-h li.iehover li.iehover a {
背景：#ccc;
颜色：#fff;
}
/ *第三菜单 */
UL＃NAVMENU-H LI：Hover Li：Hover Li A，
ul＃navmenu-h li.iehover li.iehover li a {
背景：#eee;
颜色：＃666;
}
/ *第三菜单悬停持久性 */
UL＃NAVMENU-H LI：Hover Li：Hover Li A：悬停
UL＃NAVMENU-H LI：Hover Li：Hover Li：Hover A，
ul＃navmenu-h li.iehover li.iehover li a：盘旋，
ul＃navmenu-h li.iehover li.iehover li.iehover a {
背景：#ccc;
颜色：#fff;
}
/ *第四菜单 */
UL＃NAVMENU-H LI：Hover Li：Hover Li：Hover Li A，
ul＃navmenu-h li.iehover li.iehover li.iehover li a {
背景：#eee;
颜色：＃666;
}
/ *第四菜单悬停 */
UL＃NAVMENU-H LI：Hover Li：Hover Li：Hover Li A：Hover，
ul＃navmenu-h li.iehover li.iehover li.iehover li a：徘徊{
背景：#ccc;
颜色：#fff;
}
ul＃navmenu-h ul，
ul＃navmenu-h ul ul ul {
显示：无；
位置：绝对；
顶部：0;
左：160px;
}
/ *请勿移动 - 必须在显示之前：壁虎块 */
ul＃navmenu-h li：悬停UL，
UL＃NAVMENU-H LI：HOVER UL UL，
ul＃navmenu-h li.iehover ul ul，
ul＃navmenu-h li.iehover ul ul ul {
显示：无；
}
UL＃NAVMENU-H LI：HOVER UL，
UL＃NAVMENU-H UL LI：HOVER UL，
UL＃NAVMENU-HUL 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 {
显示：块;
}
</style> <脚本语言=“ 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（new Regexp（“ iehover // b”），
”）;
}
}
}
if（window.attachevent）window.attachevent（“ onload”，navHover）;
</script>
</head>
<身体>
<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>