Bootstrap Submenus opens all sub menus at the same time.

[pldiguanaman]

I have added the bootstrap submenu CSS and JS to get submenus to appear since this is not a mobile web site. Here is the code:
@code
Dim AppMenuController As New Controllers.AppMenuController
Dim AppMenus = AppMenuController.GetAppMenu
Dim AppMenuRoots = AppMenuController.GetAppMenuRoots

For Each Menu In AppMenuRoots

            @:<td>
                @:<div class="dropdown" style="width:100%">

                @:<ul class="nav navbar-nav navbar-left">
                @:<li class="dropdown">
                @:<a href = "#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" style="height:35px">
                @Menu.Title
                @:<span class="caret"></span></a>

    Dim AppMenuItems = AppMenus.Where(Function(x) x.ParentId IsNot Nothing AndAlso x.ParentId = Menu.MenuId).ToList
    If AppMenuItems IsNot Nothing AndAlso AppMenuItems.Count > 0 Then

                @:<ul class="dropdown-menu" role="menu" style="font-size:12px">

        For Each Item In AppMenuItems

            If AppMenuController.HasAccessToAppMenu(Item.AppLevel) Then

                If String.IsNullOrEmpty(Item.URL) Then
                    Dim SubItems = AppMenus.Where(Function(x) x.ParentId IsNot Nothing AndAlso x.ParentId = Item.MenuId).ToList


                                @:<li class="dropdown-submenu" role="menu"  >
                                @:<a href="#">@Item.Title</a>
                                @:<ul class="dropdown-menu" role="menu" style="font-size:10px">


                    For each SItem In SubItems
                        If AppMenuController.HasAccessToAppMenu(SItem.AppLevel) Then

                                        @:<li style="font-size:10px;white-space:nowrap"><a href =@SItem.URL>@SItem.Title</a></li>

                        End If
                    Next

                                @:</ul> 
                                @:</li> 


                Else
                                @:<li style="font-size:10px"><a href =@Item.URL> @Item.Title</a></li>

                End If


            End If

        Next

                    @:</ul>

                End If

               @:</ul> 
             @:</div>
           @:</td>

Next

For Spacers As Integer = 0 To 10

            @:<td>&nbsp;&nbsp;&nbsp;</td>

Next


    End code

All of the sub menus open the second I hover over the top link. I added this to the bootstrap.css to enable the hover to open the link:
.dropdown:hover .dropdown-menu { display: block; }
Any ideas why all the submenus open at once instead of only when I hover over the submenu link?

[vsn4ik]

Which version you are using (Bootstrap, Bootstrap-submenu)? How to initialize the Bootstrap-submenu?

[pldiguanaman]

Both bootstrap and bootstrap-submenu. I finally got it work by adding several more lines in the bootstrap.css file that I found at another web site. Changing the ".dropdown:hover .dropdown-menu " to
".dropdown:hover>.dropdown-menu " made the ultimate difference.