Nav Bar not displaying 1 sub menu

hi
i have a side navbar menu which has 5 parent id i am trying to display a data driven menu.
the 1st, 2nd, 4th and 5th parent id is showing the submenus but the 3rd one is not showing anything. pls. guide.
below is the code for it.

html:

HTML Code:

---

<div id="mySidenav" class="sidenav">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
            <div>
       
            <%--<div class="brand">
                AspSnippets</div>--%>
            <%--<i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content">
            </i>--%>
            <div class="menu-list">
               
                    <asp:Repeater ID="rptCategories" runat="server" OnItemDataBound="rptMenu_OnItemBound">
                        <ItemTemplate>
                            <li data-toggle="collapse" data-target='#<%#Eval("InnerHtml") %>' class="collapsed"><a
                                href='<%#Eval("Url") %>' style="font-size: medium" ><i class='<%#Eval("CssFont") %>'></i>
                                <%#Eval("InnerHtml")%><span class="arrow"></span></a> </li>
                            <asp:Literal ID="ltrlSubMenu" runat="server" ></asp:Literal>
                        </ItemTemplate>
                    </asp:Repeater>
                 
               
            </div>
       
    </div>

    </div>
    <div id="main">
        <span style="font-size: 30px; cursor: pointer" onclick="openNav()"> Open Menu</span>
    </div>
    <script>
        function openNav() {
            document.getElementById("mySidenav").style.width = "250px";
            document.getElementById("main").style.marginLeft = "250px";
        }

        function closeNav() {
            document.getElementById("mySidenav").style.width = "0";
            document.getElementById("main").style.marginLeft = "0";
        }
    </script>
   

---

Code:

---


    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
        If Not Me.IsPostBack Then
            Me.BindMenu()
        End If
    End Sub


    Protected Sub rptMenu_OnItemBound(sender As Object, e As RepeaterItemEventArgs)
        If e.Item.ItemType = ListItemType.Item OrElse e.Item.ItemType = ListItemType.AlternatingItem Then
            If e.Item.ItemType = ListItemType.Item OrElse e.Item.ItemType = ListItemType.AlternatingItem Then
                If Menus IsNot Nothing Then
                    Dim drv As DataRowView = TryCast(e.Item.DataItem, DataRowView)
                    Dim ID As String = drv("MainID").ToString()
                    Dim Title As String = drv("InnerHtml").ToString()
                    Dim rows As DataRow() = Menus.[Select](Convert.ToString("ParentId=") & ID)
                    If rows.Length > 0 Then

                        Dim sb As New StringBuilder()
                        sb.Append((Convert.ToString("<ul id='") & Title) + "' class='sub-menu collapse'>")
                        For Each item In rows
                            Dim parentId As String = item("MainID").ToString()
                            Dim parentTitle As String = item("InnerHtml").ToString()

                            Dim parentRow As DataRow() = Menus.[Select](Convert.ToString("ParentId=") & parentId)

                            If parentRow.Count() > 0 Then
                                sb.Append((Convert.ToString("<li data-toggle='collapse' data-target='#") & parentTitle) + "' class='collapsed'><a  style='font-size: medium'  href='" + item("Url") + "'>" + item("InnerHtml") + "<span class='arrow'></span></a>")
                                sb.Append("</li>")
                            Else
                                sb.Append("<li><a  style='font-size: medium'  href='" + item("Url") + "'>" + item("InnerHtml") + "</a>")
                                sb.Append("</li>")
                            End If
                            sb = CreateChild(sb, parentId, parentTitle, parentRow)
                        Next
                        sb.Append("</ul>")
                        TryCast(e.Item.FindControl("ltrlSubMenu"), Literal).Text = sb.ToString()
                    End If
                End If
            End If
        End If
   
    End Sub


    Private Function CreateChild(sb As StringBuilder, parentId As String, parentTitle As String, parentRows As DataRow()) As StringBuilder
        If parentRows.Length > 0 Then
            sb.Append((Convert.ToString("<ul id='") & parentTitle) + "' class='sub-menu collapse'>")
            For Each item In parentRows
                Dim childId As String = item("MainID").ToString()
                Dim childTitle As String = item("InnerHtml").ToString()
                Dim childRow As DataRow() = Menus.[Select](Convert.ToString("ParentId=") & childId)

                If childRow.Count() > 0 Then
                    sb.Append((Convert.ToString("<li data-toggle='collapse' data-target='#") & childTitle) + "' class='collapsed'><a  style='font-size: medium' href='" + item("Url") + "'>" + item("InnerHtml") + "<span class='arrow'></span></a>")
                    sb.Append("</li>")
                Else
                    sb.Append("<li><a  style='font-size: medium'  href='" + item("Url") + "'>" + item("InnerHtml") + "</a>")
                    sb.Append("</li>")
                End If
                CreateChild(sb, childId, childTitle, childRow)
            Next

            sb.Append("</ul>")
        End If
   

        Return sb
    End Function


    Private Sub BindMenu()
        ' Menus = GetData("SELECT [MenuId], [ParentMenuId], [Title], [Description], [Url],[CssFont] FROM [Menus]")
        Menus = GetData("SELECT [MainID], [ParentId], [InnerHtml], [InnerHtml], [Url],[CssFont] FROM [MenuList] WHERE LoginType = 'Admin' Order By MyOrder")
        Dim view As New DataView(Menus)
        view.RowFilter = "ParentId=0"
        Me.rptCategories.DataSource = view
        Me.rptCategories.DataBind()
        'Menus = GetData("SELECT [MenuId], [ParentMenuId], [Title], [Description], [Url],[CssFont] FROM [Menus]")
        'Dim view As New DataView(Menus)
        'view.RowFilter = "ParentMenuId=0"
        'Me.rptCategories.DataSource = view
        'Me.rptCategories.DataBind()

    End Sub

    Private Function GetData(query As String) As DataTable
        Dim dt As New DataTable()
        Dim constr As String = ConfigurationManager.ConnectionStrings("SqlConnectionString").ConnectionString
        Using con As New SqlConnection(constr)
            Using cmd As New SqlCommand(query)
                Using sda As New SqlDataAdapter()
                    cmd.CommandType = CommandType.Text
                    cmd.Connection = con
                    sda.SelectCommand = cmd
                    sda.Fill(dt)
                End Using
            End Using
            Return dt
        End Using
    End Function

---

i have checked the datatable all the records are perfect in that. seems i am missing out on some minor point.
Thanks in advance

Hello,@kuldevbhasin

Please try this code,To nav bar not displaying 1 sub menu

Code:

---

<script src="Scripts/jquery-3.4.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
    <link href="Content/bootstrap-reboot.min.css" rel="stylesheet" />
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <script>
        $(function () {
            $('.dropdown-menu a.dropdown-toggle').on('click', function (e) {
                if (!$(this).next().hasClass('show')) {
                    $(this).parents('.dropdown-menu').first().find('.show').removeClass('show');
                }
                var $subMenu = $(this).next('.dropdown-menu');
                $subMenu.toggleClass('show');

                $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function (e) {
                    $('.dropdown-submenu .show').removeClass('show');
                });
                return false;
            });
        })
    </script>



 <nav class="navbar navbar-expand-lg navbar-light">
            <a class="navbar-brand" href="#">
                <img class="img-fluid img-logo" src="image/image6.jpg" alt="Company Name" />
            </a>
            <div class="collapse navbar-collapse" id="navbarNavDropdown">
                <ul class="navbar-nav">
                    <li class="nav-item active">
                        <a class="nav-link" href="Default.aspx">Home<span class="sr-only"></span></a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true"
                            aria-expanded="false">Links 1
                        </a>
                        <ul class="dropdown-menu text-right">
                            <li>
                                <a class="dropdown-item" href="#">Link 1</a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="#">Link 2</a>
                            </li>
                            <li class="nav-item dropdown-submenu">
                                <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true"
                                    aria-expanded="false">Sublinks
                                </a>
                                <ul class="dropdown-menu text-right">
                                    <li>
                                        <a class="dropdown-item" href="#">Sublink 1</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true"
                            aria-expanded="false">Links 2
                        </a>
                        <div class="dropdown-menu text-right">
                            <a class="dropdown-item" href="#">Link 1</a>
                            <a class="dropdown-item" href="#">Link 2</a>
                            <a class="dropdown-item" href="#">Link 3</a>
                        </div>
                    </li>
                </ul>
            </div>
        </nav>

---

I hope this code will be useful for you.
Thank you.