vijay

welcome Netizen

Share Your Knowledge.It is a way to achieve immortality

Wednesday, June 13, 2012

Create simple dropdown CSS menu in asp.net


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

0 comments:

Post a Comment