Dynamic Menu and Submenu Binding in ASP.NET C#

Css Page

/* Start Menu */

nav {
    position: relative;
    width: 360px;
}

    nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

        nav ul li {
            /* Sub Menu */
        }

            nav ul li a {
                display: block;
                padding: 10px 15px;
                color: #fff;
                text-decoration: none;
                -webkit-transition: 0.2s linear;
                -moz-transition: 0.2s linear;
                -ms-transition: 0.2s linear;
                -o-transition: 0.2s linear;
                transition: 0.2s linear;
                background: #379add;
            }

                nav ul li a:hover {
                    background: #1d4f71;
                    color: #fff;
                }

                nav ul li a .fa {
                    width: 16px;
                    text-align: center;
                    margin-right: 5px;
                    float: right;
                }

        nav ul ul {
            background: rgba(0, 0, 0, 0.2);
        }

        nav ul li ul li a {
            border-left: 4px solid transparent;
            padding: 10px 20px;
        }

            nav ul li ul li a:hover {
                border-left: 4px solid #3498db;
            }


.chevron-down::before {
    border-style: solid;
    border-width: 0.15em 0.15em 0 0;
    content: '';
    display: inline-block;
    height: 0.45em;
    left: 0.15em;
    position: relative;
    top: 0.15em;
    transform: rotate(-45deg);
    vertical-align: top;
    width: 0.45em;
    top: 0;
    transform: rotate(135deg);
    margin-top: 2px;
    margin-left: 5px;
}

.chevron-up::before {
    border-style: solid;
    border-width: 0.15em 0.15em 0 0;
    content: '';
    display: inline-block;
    height: 0.45em;
    left: 0.15em;
    position: relative;
    top: 0.15em;
    transform: rotate(-45deg);
    vertical-align: top;
    width: 0.45em;
    top: 0;
    margin-top: 6px;
    margin-left: 5px;
}
/* End Menu */

Aspx page

<script src="../Js/jquery-3.4.1.min.js"></script>
 

    <script type="text/javascript">
        $(document).ready(function () {
            $('.sub-menu ul').hide();
            $(".sub-menu a").click(function () {
                $(this).parent(".sub-menu").children("ul").slideToggle("100");
                $(this).find(".right").toggleClass("fa-caret-up fa-caret-down");
                $(this).find(".arrow").toggleClass("chevron-up chevron-down");
            });
        });
     </script>

                                               <nav class="animated bounceInDown bg-dark">
	                                                    <ul>
                                                             <asp:Repeater ID="RptMainMenu" runat="server" OnItemDataBound="RptMainMenu_ItemDataBound">
                                                            <ItemTemplate>
		                                                    <li class="sub-menu "><a href="#"><%# Eval("MenuName")%><span id="UpDownArrow" class="chevron-down arrow"></span><div class="fa fa-caret-down right"></div></a>
			                                                    <ul style="display:none;">
                                                                     <asp:Repeater ID="RptSubMenu" runat="server">
                                                                       <ItemTemplate>
				                                                           <li><a href='<%# Eval("FormUrl").ToString().Replace("~", "")%>'><%# Eval("MenuName")%></a></li>
                                                                       </ItemTemplate>
                                                                       </asp:Repeater>
                                                                    <asp:HiddenField ID="hfMainMenuId" runat="server" Value='<%# Eval("ID") %>' />
			                                                    </ul>
		                                                    </li>
		                                                    </ItemTemplate>
                                                            </asp:Repeater>
	                                                    </ul>
                                                    </nav>

cs page 

  protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            GenerateMenuItem();
        }
    }

    public void GenerateMenuItem()
    {
        CommonBAL objCB = new CommonBAL();
        string userName = Convert.ToString(Session["UserName"]);
        Menuds = objCB.GetNewFormRoleAllocation(userName);
        RptMainMenu.DataSource = Menuds.Tables[0];
        RptMainMenu.DataBind();
    }

    protected void RptMainMenu_ItemDataBound(object sender, RepeaterItemEventArgs e)
    {
        if(e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
        {
            string MainMenuId = (e.Item.FindControl("hfMainMenuId") as HiddenField).Value;
            Repeater RptSubMenu = e.Item.FindControl("RptSubMenu") as Repeater;

            DataView dv = new DataView(Menuds.Tables[1]);
            dv.RowFilter = string.Format("ParentId={0}", Convert.ToInt32(MainMenuId));
            RptSubMenu.DataSource = dv;
            RptSubMenu.DataBind();
        }
    }

In DB 

Create menu Table in Name and other columns if we want to like img icon...etc of menu and set ID as primary key. Create Submenu Table add menu Id as a forien key in this table. according to shown like below PFA.