该篇文章代码为转载，做了点详尽注释，希望大家喜欢。
运行结果：
 
<style type="text/css">
        *{margin:0px;padding:0px;}
       
        .my_nav
        {
         width:163px;
            font-size: 12px;
            font-family: Arial,Verdana,Helvetica,sans-serif;
        }
        ul /** 一级菜单 */
        {
            list-style: none;
            width:163px;
        }
        ul li /** 一级菜单菜单项 */
        {
            position: relative;
            display:block;          
        }
        ul li ul /** 二级菜单，初始时二级菜单隐藏：display: none */
        {
            position: absolute;
            left:162px;
            top: 0;
            width:163px; 
            display: none;
            list-style: none;                     
            z-index:50;
        }
        ul li a /** 一级菜单菜单项链接样式 */
        {
            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 /** 当鼠标放在一级菜单项上，一级菜单（弹出样式：showStyle）菜单项链接样式：背景 */
        {
         background:#ebeaeb;
         }
        li:hover ul li a,li.showStyle ul li a /** 当鼠标放在一级菜单项上，二级菜单（弹出样式）菜单项链接样式：背景 */
        {
         background: #cbc9c8;
         }
        ul li a:hover /** 当鼠标放在一级菜单项上，一级菜单（弹出样式:showStyle）菜单项链接样式：字体粗体 */
        {
            font-weight: bold;           
        }
        li:hover ul li a:hover,li.showStyle ul li a:hover /** 鼠标在二级菜单（同时在当前一级菜单），二级菜单项的背景*/
        {
         background: #ebeaeb;
         }
        * html ul li
        {
            float: left;           
        }      
        li:hover ul, li.showStyle ul /** 鼠标在一级菜单上，二级菜单样式为showStyle，打开：display: block */
        {
            display: 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++)  // 遍历所有一级菜单
                { 
                    node = navRoot.childNodes[i]; 
                    if (node.nodeName=="LI")  // 一级菜单
                    { 
                        node. // 放上鼠标时把样式改成showStyle，打开
                        { 
                            this.className+="showStyle";  
                        }  
                        node. // 放上鼠标时把样式改成空，隐藏
                        { 
                            this.className=this.className.replace("showStyle", "");  
                        }                      
                    } 
                } 
            } 
        } 
        window. onload = showNavList;
 
    </script>
<div 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>
        <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="#">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>
            </ul>
        </li>
        <li><a href="#">Intl Exposure </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><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><a href="#">Student</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><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><a href="#">Admission </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>
    </ul>
</div>
css起到了一种数据和显示样式分离的作用。使用UL做菜单，代码简洁清晰，在后期菜单修改时非常方便。UL菜单结构为：
<ul id="menu1">
    <li>一级菜单项
       <ul id="menu2">
            <li>二级菜单项</li>
            <li>二级菜单项</li>
       </ul>
    </li>
</ul>
初始状态只显示一级菜单项，则menu1显示:display:block; 二级菜单隐藏，menu2显示:display:none;
然后要做的就是：当鼠标在一级菜单项时就将该项下面的二级菜单样式改成可见display:block; 鼠标离开时再将其改回隐藏display:none;
当然为了美观，需要对应不同状态改变文本样式和背景等。