[Solved] How to design and style ASP.Net Menu control

Hello,

I was going through the following articl http://www.aspsnippets.com/Articles/Database-driven-ASPNet-Menu-control-Populating-Menu-items-from-the-Database-in-ASPNet-using-C-and-VBNet.aspx and I did try to create menues from the database. I noted that the code only allows for top level 1 and level 2 (submenu) menu items only.

I modified the code and got what I wanted. Now I have issues with formatting. The subsequent menu levels (submenus) are not well formated. Could you please help on how i can format the menu items using CSS?

Below is the modified cosde:

 This code seems ok.

    Private Sub PopulateMenu(dt As DataTable, parentMenuId As Integer, parentMenuItem As MenuItem)
        Dim currentPage As String = Path.GetFileName(Request.Url.AbsolutePath)
        For Each row As DataRow In dt.Rows
            Dim menuItem As New MenuItem() With {.Value = row("MenuId").ToString(), .Text = row("Title").ToString(), .NavigateUrl = row("Url").ToString(), .Selected = row("Url").ToString().EndsWith(currentPage, StringComparison.CurrentCultureIgnoreCase)}
            If parentMenuId = 0 Then
                Menu1.Items.Add(menuItem)
                Dim dtChild As DataTable = Me.GetData(Integer.Parse(menuItem.Value))
                PopulateMenu(dtChild, Integer.Parse(menuItem.Value), menuItem)
            Else
                parentMenuItem.ChildItems.Add(menuItem)
                Dim dtChild2 As DataTable = Me.GetData(Integer.Parse(menuItem.Value))
                PopulateMenu(dtChild2, Integer.Parse(menuItem.Value), menuItem)
            End If
        Next
    End Sub

And the corresponding code from aspx file is below:

Here is where I need help.

    <form id="form1" runat="server" class="style1">
        <div class="style1">
    <table class="style1" >
        <tr>
            <td class="style5" colspan="2" style="border: thin solid #C0C0C0">

                <asp:Menu ID="Menu1" runat="server"  Orientation="Horizontal">

                    <LevelMenuItemStyles>

                        <asp:MenuItemStyle CssClass="main_menu" />
                        <asp:MenuItemStyle CssClass="level_menu" />

                        <asp:MenuItemStyle CssClass="main_menu" />
                        <asp:MenuItemStyle CssClass="level_menu" />

                        <asp:MenuItemStyle CssClass="main_menu" />
                        <asp:MenuItemStyle CssClass="level_menu" />

                        <asp:MenuItemStyle CssClass="main_menu" />
                        <asp:MenuItemStyle CssClass="level_menu" />

                        <asp:MenuItemStyle CssClass="main_menu" />
                        <asp:MenuItemStyle CssClass="level_menu" />

                    </LevelMenuItemStyles>

                    <LevelSubMenuStyles> 
                            <asp:submenustyle CssClass="level_menu" BackColor="White" />
                            <asp:SubMenuStyle BackColor="White" VerticalPadding="10px" />
                    </LevelSubMenuStyles>

                    <StaticSelectedStyle CssClass="selected" Font-Bold="true" />

                </asp:Menu>
           </td>
        </tr>
    </table>
    </div>
    </form>

I will appreciate your help.