Copy Code code as follows:
<% @page pageencoding= "Utf-8"
Contenttype= "Text/html;charset=utf-8"%>
<HTML>
<HEAD>
<title>WebForm5</title>
<style>/* Root = horizontal, secondary = Vertical *
ul#navmenu-h {
margin:0;
border:0 none;
padding:0;
width:500px; /*for khtml*/
List-style:none;
height:24px;
}
Ul#navmenu-h Li {
margin:0;
border:0 none;
padding:0;
Float:left; /*for gecko*/
Display:inline;
List-style:none;
position:relative;
height:24px;
}
Ul#navmenu-h ul {
margin:0;
border:0 none;
padding:0;
width:160px;
List-style:none;
Display:none;
Position:absolute;
top:24px;
left:0;
}
Ul#navmenu-h Ul:after/*from IE 7 lack of compliance*/{
Clear:both;
Display:block;
font:1px/0px serif;
Content: ".";
height:0;
Visibility:hidden;
}
Ul#navmenu-h ul Li {
width:160px;
Float:left; /*for IE 7 Lack of compliance*/
Display:block!important;
Display:inline; /*for ie*/
}
/* Root Menu */
Ul#navmenu-h a {
border:1px solid #FFF;
Border-right-color: #CCC;
Border-bottom-color: #CCC;
Padding:0 6px;
Float:none!important; /*for opera*/
Float:left; /*for ie*/
Display:block;
Background: #EEE;
Color: #666;
Font:bold 10px/22px Verdana, Arial, Helvetica, Sans-serif;
Text-decoration:none;
Height:auto!important;
height:1%; /*for ie*/
}
/* Root Menu Hover Persistence * *
Ul#navmenu-h A:hover,
Ul#navmenu-h Li:hover A,
Ul#navmenu-h Li.iehover a {
Background: #CCC;
Color: #FFF;
}
/* 2nd Menu * *
Ul#navmenu-h Li:hover Li A,
Ul#navmenu-h Li.iehover Li a {
Float:none;
Background: #EEE;
Color: #666;
}
/* 2nd Menu Hover 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 {
Background: #CCC;
Color: #FFF;
}
/* 3rd Menu * *
Ul#navmenu-h Li:hover Li:hover Li A,
Ul#navmenu-h Li.iehover Li.iehover Li a {
Background: #EEE;
Color: #666;
}
/* 3rd Menu Hover Persistence * *
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 {
Background: #CCC;
Color: #FFF;
}
/* 4th Menu * *
Ul#navmenu-h li:hover Li:hover Li:hover Li A,
Ul#navmenu-h li.iehover Li.iehover Li.iehover li a {
Background: #EEE;
Color: #666;
}
/* 4th 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 {
Background: #CCC;
Color: #FFF;
}
Ul#navmenu-h ul ul,
UL#NAVMENU-H UL ul ul
Display:none;
Position:absolute;
top:0;
left:160px;
}
/* Do not move-must Come before display:block for Gecko * *
UL#NAVMENU-H Li:hover ul ul,
UL#NAVMENU-H Li:hover ul ul,
UL#NAVMENU-H Li.iehover ul ul,
UL#NAVMENU-H Li.iehover UL ul ul
Display:none;
}
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 {
Display:block;
}
</style><script language= "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>
<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>