In a previous article i explain about to create asp.net menu
control with CSS, Here we build the dropdown menu with simple CSS.
Some project there no use create with asp.net menu control.
In that case we can use the simple CSS menu.
Main purpose of the article to explain the creation of
simple CSS menu, i hope this one will be easy to understand the concept behind
on CSS menu, here am not using any JavaScript to create CSS
CSS:
<style type="text/css">
ul
{
padding: 0px;
margin: 0px; /*By
default padding and margin set as zero*/
}
/*www.Dotnetcode.in*/
ul li
{
display: inline; /*IT change ul display
in single line*/
float: left; /*www.Dotnetcode.in*/
width: 100px; /*Every menu its set the width*/
font-size: 15px; /*Set
the font size*/
font-family: @Arial Unicode MS Verdana;
vertical-align: middle;
}
ul li a
{
color: #FFFFFF;
display: block;
background-color: #C82B16;
text-decoration: none;
line-height: 30px; /*Increase
menu height*/
padding-left: 8px;
}
ul li a:hover
{
/*www.Dotnetcode.in*/
background-color: #333333; /*when doing Hover the color bg color change*/
}
ul li ul li a
{
background-color: #C82B16;
font-size: 12px;
}
ul li ul li a:hover
{
background-color: #333333;
height: 30;
font-size: 12px;
}
ul li ul
{
visibility: hidden; /*Intial sub mune is hidden*/
}
ul li:hover ul
{
visibility: visible; /*when doing Hover submenu visible*/
}
</style>
|
The list code make as menu control
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<!--www.Dotnetcode.in-->
<ul>
<li><a href="Home.aspx">Home</a></li>
<li><a href="Menu.aspx">Menu1</a></li>
<li><a href="Menu2.aspx">Menu2</a>
<ul>
<li><a href="SubMenu1.aspx">SubMenu1</a></li>
<li><a href="SubMenu2.aspx">SubMenu2</a></li>
<li><a href="SubMenu3.aspx">SubMenu3</a></li>
</ul>
</li>
<li><a href="Menu3.aspx">Menu3</a></li>
</ul>
<!--www.Dotnetcode.in-->
</td>
</tr>
</table>
|
I hope you it helpful and you like it
Share it with your
friends
