js+css+ul实现二级菜单

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="MyLeftNav.ascx.cs" Inherits="MIT.UserContral.MyLeftNav" %>

<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
{
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.on a
{
background:#ebeaeb;
}
li:hover ul li a,li.on ul li a
{
background: #cbc9c8;
}
ul li a:hover
{
font-weight: bold;
}
li:hover ul li a:hover,li.on ul li a:hover
{
background: #ebeaeb;
}
* html ul li
{
float: left;
}
li:hover ul, li.on ul
{
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.onmouseover=function()
{
this.className+="on";
}
node.onmouseout=function()
{
this.className=this.className.replace("on", "");
}
}
}
}
}
window.onload=startList;

</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>