The results of this article's code:
<style type= "Text/css" > *{margin:0px;padding:0px;}
. my_nav {width:163px;
font-size:12px;
Font-family:arial,verdana,helvetica,sans-serif;
UL/** level menu * * LIST-STYLE:NONE;
width:163px;
UL Li/** level menu menu item * * position:relative;
Display:block;
UL Li ul/** two level menu, initial two level menu hidden: display:none * * position:absolute;
left:162px;
top:0;
width:163px;
Display:none;
List-style:none;
z-index:50;
UL li a/** Level menu menu item Link Style * * display:block;
Text-decoration:none;
Background: #cbc9c8;
height:20px;
border:1px solid #ffffff;
border-bottom:0;
Color: #666666; Padding-left:10px;
line-height:20px; Li:hover A,li.showstyle a/** when the mouse is placed on a level menu item, the first-order (pop-up style: showstyle) menu item link Style: Background * * Background: #ebeae
b Li:hover ul Li A,li.showstyle ul li a/** when the mouse is placed on the first level menu item, level two menus (pop-up style) menu item link Style: Background * * Background: #cb
C9c8;
UL Li A:hover/** when the mouse is placed on the first level menu items, a level of menus (pop-up style: showstyle) menu item link style: Font bold/{font-weight:bold;
Li:hover ul Li A:hover,li.showstyle ul li a:hover/** mouse in Level two menu (also at the current level menu), two-level course Item Background * *
Background: #ebeaeb;
* HTML ul li {float:left; Li:hover ul, Li.showstyle ul/** Mouse on a level menu, level two menu style for showstyle, open: Display:block/{disp
Lay:block;
margin-bottom:0px; } </style> <script type= "Text/javascript" > startlist = function () {if ( DOcument.all&&document.getelementbyid) {navroot = document.getElementById ("Nav"); For (i=0 i<navroot.childnodes.length; i++)//Traverse All level Menu {node = n
Avroot.childnodes[i];
if (node.nodename== "LI")//First level menu {node.////////////////////////
{this.classname+= "showstyle"; node. When you put the mouse, change the style to empty, hide {this.classname=this.classname.replace ("showstyle"
, ""); }}} window.
onload = shownavlist;
</script> <p class= "My_nav" > <ul id= "nav" > <li><a href= "#" >about imba</a>
<ul class= "Nav2" > <li><a href= "#" >program features</a></li> <li><a href= "#" >
Class profile</a></li> <li><a href= "#" >industry cooperation</a></li> <li><a href= "#" >program milestone</a></li> </ul> </li&
Gt <li><a href= "#" >academics </a> <ul class= "nav2" > <li><a href=
"#" >first</a></li> <li><a href= "#" >second</a></li> <li><a href= "#" >third</a></li> </ul> </li> <li><a href= "#" >extra curricula </a> <ul class= "nav2" > <li><a href= "#" >fi Rst</a></li> <li><a href= "#" >second</a></li> <li> ; <a href="#" >third</a></li> <li><a href= "#" >forth</a></li> & Lt;li><a href= "#" >fifth</a></li> </ul> </li> <li><a href= "#" >intl exposure </a> <ul class= "nav2" > <li><a href= "#" >first </a></li> <li><a href= "#" >second</a></li> <LI>&L
T;a href= "#" >third</a></li> <li><a href= "#" >forth</a></li> <li><a href= "#" >fifth</a></li> <li><a href= "#" >sixth</a>
</li> </ul> </li> <li><a href= "#" >careers </a> <ul class= "Nav2" > <li><a href= "#" >first</a></li> <li> <a href= "#" >second</a></li> <li><a href= "#" >third</a></li> <li><
; a href= "#" >forth</a></li> <li><a href= "#" >fifth</a></li> <li><a href= "#" >sixth</a></li> </ul> </li> <LI&G T;<a href= "#" >Student</a> <ul class= "nav2" > <li><a href= "#" >firs T</a></li> <li><a href= "#" >second</a></li> <li>&
Lt;a href= "#" >third</a></li> <li><a href= "#" >forth</a></li> <li><a href= "#" >fifth</a></li> <li><a href= "#" >sixth</a>
;</li> </ul> </li> <li><a href= "#" >alumni </a> <ul class= "Nav2" >
<li><a href= "#" >first</a></li> <li><a href= "#" >second </a></li> <li><a href= "#" >third</a></li> <li><
; a href= "#" >forth</a></li> <li><a href= "#" >fifth</a></li> <li><a href= "#" >sixth</a></li> </ul> </li> <LI&G T;<a href= "#" >admission </a> <ul class= "nav2" > <li><a href= "#" >f Irst</a></li> <li><a href= "#" >second</a></li> <LI&G
T;<a href= "#" >third</a></li> <li><a href= "#" >forth</a></li> <li><a href= "#" >fifth</a></li> <li><a href= "#" >sixth</a
></li> </ul> </li> </ul> </p>