<%@ 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>