create dynamic menu and sub-menu with sql database in asp.net

Create Two table first

DATABASE

----------------------------------------
create table menu
(
id int primary key identity(1,1),
name varchar(120),
url varchar(200),
isorder int unique,
isactive int default(1)
)

create table submenu
(
id int primary key identity(1,1),
name varchar(120),
url varchar(200),
isorder int unique,
menuid int,
isactive int default(1)
)

ASPX PAGE :

--------------------------------
<div class="menu-part">


        <div class="menu">

            <div class="menu-inner">
            <ul id="main_menu">
                <asp:DataList ID="DataList1" runat="server" DataKeyField="id"
                    RepeatDirection="Horizontal" onitemdatabound="DataList1_ItemDataBound">
                <ItemTemplate>
                <li>
                    <asp:LinkButton ID="menu" CommandArgument='<%#Eval("id") %>'                                                           PostBackUrl='<%#Eval("url") %>' runat="server"><%#Eval("name") %>
                     </asp:LinkButton>
                        <ul style="overflow: hidden; display: block; height: 0px; z-index: 51; opacity: 0.00588235;">
                         <asp:DataList ID="DataList2" runat="server">
                         <ItemTemplate>
                         <li>
                               <asp:LinkButton ID="submenu" CommandArgument='<%#Eval("id") %>'                                                     PostBackUrl='<%#Eval("url") %>' runat="server"><%#Eval("name") %>                                                     </asp:LinkButton>
                          </li>
                         </ItemTemplate>
                          </asp:DataList>
                   </ul>
                </li>
                </ItemTemplate>
                </asp:DataList>
            </ul>
             
            </div>

        </div>

    </div>

CS PAGE

-----------------------------------------
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;

public partial class MasterPage : System.Web.UI.MasterPage
{
    SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["con1"].ConnectionString);
    SqlCommand cmd;
    SqlDataAdapter da;
    DataTable dt;
    protected void Page_Load(object sender, EventArgs e)
    {
        menu();
    }
    public void menu()
    {
        try
        {
            da = new SqlDataAdapter("select * from menu order by isorder", con);
            dt = new DataTable();
            da.Fill(dt);
            DataList1.DataSource = dt;
            DataList1.DataBind();

        }
        catch (Exception)
        { }
    }
 
    protected void DataList1_ItemDataBound(object sender, DataListItemEventArgs e)
    {
        DataList submenu = (DataList)e.Item.FindControl("DataList2");
        LinkButton menu = (LinkButton)e.Item.FindControl("menu");
        int id=Convert.ToInt32( menu.CommandArgument);
        da = new SqlDataAdapter("select * from submenu where menuid=" + id + " order by isorder", con);
        dt = new DataTable();
        da.Fill(dt);
        submenu.DataSource = dt;
        submenu.DataBind();
     
    }
}

CSS CODE

--------------------------------------

.top-menu{height:auto;float:right;padding-right:65px;}

.top-menu ul li{display:inline-block;float:left;background:url(../images/top-menu-bu.png) left no-repeat;font:11px bold Arial, Helvetica, sans-serif;text-transform:uppercase;color:#FFF;padding-left:18px;padding-right:14px;}

.top-menu ul li a{color:#FFF;}

.top-menu ul li a:hover{color:#ed0345;}

.menu-part{width:1011px;height:auto;float:left;}

.menu{width:731px;height:60px;float:left;background:url(../images/menu-left.png) no-repeat;}

.menu-inner{width:1011px;height:60px;float:left;background:url(../images/menu-bg.png) repeat-x;font:Bold 14px  Arial, Helvetica, sans-serif;text-transform:uppercase;color:#fafeff;text-shadow: 0px 1px #011e33;}

ul#main_menu {list-style:none; margin-top:17px;}

ul#main_menu * {margin:0; padding:0;}

ul#main_menu li {position:relative; background:url(../images/divater.png) right no-repeat; float:left; padding-left:24px; padding-right:24px;height:30px; padding-top:13px;}

ul#main_menu li a{font:Bold 12px  Arial, Helvetica, sans-serif;color:#FFF; text-transform:uppercase;}

ul#main_menu li a:hover{color:#f8a94d;}

ul#main_menu li.selected a{color:#f8a94d;}

ul#main_menu ul {position:absolute; top:50px; left:0px;display:none; opacity:0; list-style:none;}

ul#main_menu ul li {position:relative; width:200px;padding:0px; background:#17476f; border:#0e406a solid 1px;-moz-border-radius:3px;-webkit-border-radius: 6px;margin-bottom:2px;}

ul#main_menu ul li a {display:block; padding:6px 10px 10px 10px; color:#FFF; font-size:16px;-moz-border-radius:3px;-webkit-border-radius:6px; font:Normal 14px Arial, Helvetica, sans-serif;color:#FFF;

text-transform:none;}

ul#main_menu li.selected ul li a{ color:#FFFFFF;}

ul#main_menu li.selected ul li a:hover{ color:#f8a94d;}

ul#main_menu ul li a:hover {background-color:#3271a6; color:#FFF; display:block; padding-bottom:8px; }