Using CSS and JS to control the implementation of the two-level UL menu

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&gt ; <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> &LT;LI&GT;&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>&lt
                ; a href= "#" >forth</a></li> <li><a href= "#" >fifth</a></li> <li><a href= "#" >sixth</a></li> </ul> </li> &LT;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&gt
            ;</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>&lt
                ; a href= "#" >forth</a></li> <li><a href= "#" >fifth</a></li> <li><a href= "#" >sixth</a></li> </ul> </li> &LT;LI&G T;<a href= "#" >admission </a> <ul class= "nav2" > <li><a href= "#" >f Irst</a></li> <li><a href= "#" >second</a></li> &LT;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>