Menu Control

For Menu Controls U'll be needed UI Code & Style sheet given below.

UI Code:
    Place this piece of code in aspx/ascx file.
 
<ul class="cssMenu cssMenum" style="display: table; width: 150px;">
        <li class=" cssMenui" style="width: 150px;"><a class=" cssMenui" href="#" >
            <h2 style="text-align:center;">    Menu
                </h2>
            <![if gt IE 6]></a> <![endif]>
            <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul class=" cssMenum" style="margin-left: 148px !important; margin-left: 144px; margin-top: -20px;">
                <li class=" cssMenui">   <a class=" cssMenui" href="#"> Sub Menu1<![if
                    gt IE 6]> </a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                </li>
                <li class=" cssMenui"><a class=" cssMenui" href="#"> Sub Menu2<![if
                    gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                </li>
                <li class=" cssMenui"><a class=" cssMenui" href="#"> Sub Menu3
                <![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                </li>
            </ul>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
</ul>
Style Sheet:
     Place this styles in a style sheet from your application.

/* CSS Document @charset "utf-8"; */
ul.cssMenu ul{display:none}
ul.cssMenu li:hover>ul{display:block}
ul.cssMenu ul{position: absolute;left:-1px;top:98%;}
ul.cssMenu ul ul{position: absolute;left:98%;top:-2px;}
ul.cssMenu,ul.cssMenu ul {
    margin:0px;
    list-style:none;
    padding:0px ;
    /*background-color:#000000;
    background-repeat:repeat;*/
    border-style:none;
}
ul.cssMenu table {border-collapse:collapse;}ul.cssMenu {
    display:block;
    zoom:1;
    position:absolute;
    z-index: 1000;
   
}
* HTML ul.cssMenu {position:absolute;}
ul.cssMenu ul{
    width:192px;
}
ul.cssMenu li {
    display:block;
    margin:0px 12px 0px 0px;
    font-size:0px;
}
ul.cssMenu a:active, ul.cssMenu a:focus {
outline-style:none;
}

ul.cssMenu a, ul.cssMenu li.dis a:hover, ul.cssMenu li.sep a:hover, ul.cssMenu li.sep a:visited {
    display:block;
    vertical-align:middle;
    /*background-color:#000000;*/
    border-width:0px;
    border-color:#000000;
    border-style:none;
    text-align:left;
    text-decoration:none;
    padding:0px;
    _padding-left:0;
    font:bold 12px ;
    color: #FFFFFF;
    text-decoration:none;
    cursor:pointer;
}
ul.cssMenu span{
    overflow:hidden;
}
ul.cssMenu li {
    float:left;
}
ul.cssMenu ul li {
    float:none;
}
ul.cssMenu ul a {
    text-align:left;
    /*white-space:nowrap;*/
}
ul.cssMenu li.sep{
    text-align:left;
    padding:0px;
    line-height:0;
    height:100%;
}
ul.cssMenu li.sep span{
    float:none;    padding-right:0;
    width:3px;
    height:100%;
    display:inline-block;
    background-color:#C0AF62;    background-image:none;}
ul.cssMenu ul li.sep span{
    width:100%;
    height:3px;
}
ul.cssMenu li:hover{
    position:relative;
}
ul.cssMenu li:hover>a{
    background-color:#EFEFEF;
    border-color:#4C99AB;
    border-style:none;
    font:normal 12px Verdana, Arial, Helvetica, sans-serif;
    color: #000000;
    text-decoration:none;
}
ul.cssMenu li a:hover{
    position:relative;
    background-color:#EFEFEF;
    border-color:#4C99AB;
    border-style:none;
    font:bold 12px Verdana, Arial, Helvetica, sans-serif;
    color: #000000;
    text-decoration:none;
}
ul.cssMenu li.dis a {
    color: #AAAAAA !important;
}
ul.cssMenu img {border: none;float:left;_float:none;margin-right:3px;width:16px;
height:16px;
}
ul.cssMenu ul img {width:16px;
height:16px;
}
ul.cssMenu img.over{display:none}
ul.cssMenu li.dis a:hover img.over{display:none !important}
ul.cssMenu li.dis a:hover img.def {display:inline !important}
ul.cssMenu li:hover > a img.def  {display:none}
ul.cssMenu li:hover > a img.over {display:inline}
ul.cssMenu a:hover img.over,ul.cssMenu a:hover ul img.def,ul.cssMenu a:hover a:hover ul img.def,ul.cssMenu a:hover a:hover img.over,ul.cssMenu a:hover a:hover a:hover img.over{display:inline}
ul.cssMenu a:hover img.def,ul.cssMenu a:hover ul img.over,ul.cssMenu a:hover a:hover ul img.over,ul.cssMenu a:hover a:hover img.def,ul.cssMenu a:hover a:hover a:hover img.def{display:none}
ul.cssMenu a:hover ul,ul.cssMenu a:hover a:hover ul{display:block}
ul.cssMenu a:hover ul ul{display:none}
ul.cssMenu span{
    display:block;
    background-image:url(default.files/arrowmain.gif);
    background-position:right center;
    background-repeat: no-repeat;
   padding-right:11px;}
ul.cssMenu li:hover>a>span{    background-image:url(default.files/arrowmaino.gif);
}
ul.cssMenu a:hover span{    _background-image:url(default.files/arrowmaino.gif)}
ul.cssMenu ul span,ul.cssMenu a:hover table span{background-image:url(default.files/arrowsub.gif)}
ul.cssMenu ul li:hover > a span{    background-image:url(default.files/arrowsubo.gif);}
ul.cssMenu table a:hover span,ul.cssMenu table a:hover a:hover span{background-image:url(default.files/arrowsubo.gif)}
ul.cssMenu table a:hover table span{background-image:url(default.files/arrowsub.gif)}
/*a:link {color:#FFFFFF}       unvisited link */
/*a:visited {color:#FFFFFF}   visited link */
/*a:hover {color:#FFFFFF}   mouse over link */
/*a:active {color:#FFFFFF}   selected link */
ul.cssMenu a, ul.cssMenu li.dis a:hover, ul.cssMenu li.sep a:hover, ul.cssMenu li.sep a:visited{color:#FFFFFF;}
ul.cssMenu a, ul.cssMenu li a:hover, ul.cssMenu li a:hover, ul.cssMenu li a:visited{color:#FFFFFF;font-size:12px; font-weight:bold;font-family: Verdana, Arial, Helvetica, sans-serif;}
ul.cssMenu li a:hover {color:#000000;font-size:12px;font-weight:bold;font-family: Verdana, Arial, Helvetica, sans-serif;}

|