Bootstrap Responsive ASP.Net Menu Child elements not displaying on MouseOver

Last Reply 9 months ago By pandeyism

Posted 9 months ago

Bootstrap Responsive ASP.Net Menu control for Mobile Phone Tablet and Desktop display

I made this exactly this way, but there are no child elements displayed on mouseover :-( I know they are there, because if I remove the javascript, it works fine, but not in mobile mode of course. Arrows are also not displayed?

You are viewing reply posted by: pandeyism 9 months ago.
Posted 9 months ago

Hey baits,

Please refer below sample.


        <div class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
                        <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><span
                            class="icon-bar"></span><span class="icon-bar"></span>
                    <a class="navbar-brand" href="#">ASPSnippets</a>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" RenderingMode="List"
                        IncludeStyleBlock="false" StaticMenuStyle-CssClass="nav navbar-nav" DynamicMenuStyle-CssClass="dropdown-menu">
        <hr />
<link rel="stylesheet" href=''
    media="screen" />
<script type="text/javascript" src=''></script>
<script type="text/javascript" src=''></script>
<style type="text/css">
        position: relative;
    .dropdown-submenu > .dropdown-menu
        top: 0;
        left: 100%;
        margin-top: -6px;
        margin-left: -1px;
        -webkit-border-radius: 0 6px 6px 6px;
        -moz-border-radius: 0 6px 6px 6px;
        border-radius: 0 6px 6px 6px;
    .dropdown-submenu > a:after
        display: block;
        content: " ";
        float: right;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        border-width: 5px 0 5px 5px;
        border-left-color: #cccccc;
        margin-top: 5px;
        margin-right: -10px;
    .dropdown-submenu:hover > a:after
        border-left-color: #555;
        float: none;
    .dropdown-submenu.pull-left > .dropdown-menu
        left: -100%;
        margin-left: 10px;
        -webkit-border-radius: 6px 0 6px 6px;
        -moz-border-radius: 6px 0 6px 6px;
        border-radius: 6px 0 6px 6px;
<script type="text/javascript">
    //Disable the default MouseOver functionality of ASP.Net Menu control.
    //        Sys.WebForms.Menu._elementObjectMapper.getMappedObject = function () {
    //            return false;
    //        };
    $(function () {
        $(".navbar-nav li, .navbar-nav a, .navbar-nav ul").removeAttr('style');
        $(".dropdown-toggle").find("a[href='javascript:;']").attr("data-toggle", "dropdown");
        $(".dropdown-toggle").find("a[href='javascript:;'].level1").append("<span class='caret'></span>");
        $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function (event) {



using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.IO;


Imports System.Data
Imports System.IO
Imports System.Data.SqlClient



protected void Page_Load(object sender, EventArgs e)
    if (!this.IsPostBack)
        DataTable dt = this.GetData();

private DataTable GetData()
    string query = "SELECT [MenuId], [ParentMenuId], [Title], [Description], [Url] FROM [TestMenus]";
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
        DataTable dt = new DataTable();
        using (SqlCommand cmd = new SqlCommand(query))
            using (SqlDataAdapter sda = new SqlDataAdapter())
                cmd.CommandType = CommandType.Text;
                cmd.Connection = con;
                sda.SelectCommand = cmd;
        return dt;

private void PopulateMenu(DataTable dt)
    string currentPage = Path.GetFileName(Request.Url.AbsolutePath);
    DataView view = new DataView(dt);
    view.RowFilter = "ParentMenuId=0";
    foreach (DataRowView row in view)
        MenuItem menuItem = new MenuItem
            Value = row["MenuId"].ToString(),
            Text = row["Title"].ToString(),
            NavigateUrl = row["Url"].ToString(),
            Selected = row["Url"].ToString().EndsWith(currentPage, StringComparison.CurrentCultureIgnoreCase)
        AddChildItems(dt, menuItem);

private void AddChildItems(DataTable table, MenuItem menuItem)
    DataView viewItem = new DataView(table);
    viewItem.RowFilter = "ParentMenuId=" + menuItem.Value;
    foreach (DataRowView childView in viewItem)
        MenuItem childmenuItem = new MenuItem
            Value = childView["MenuId"].ToString(),
            Text = childView["Title"].ToString(),
            NavigateUrl = childView["Url"].ToString(),
        AddChildItems(table, childmenuItem);


Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dt As DataTable = Me.GetData()
    End If
End Sub

Private Function GetData() As DataTable
    Dim query As String = "SELECT [MenuId], [ParentMenuId], [Title], [Description], [Url] FROM [TestMenus]"
    Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As SqlConnection = New SqlConnection(constr)
        Dim dt As DataTable = New DataTable()
        Using cmd As SqlCommand = New SqlCommand(query)
            Using sda As SqlDataAdapter = New SqlDataAdapter()
                cmd.CommandType = CommandType.Text
                cmd.Connection = con
                sda.SelectCommand = cmd
            End Using
        End Using
        Return dt
    End Using
End Function

Private Sub PopulateMenu(ByVal dt As DataTable)
    Dim currentPage As String = Path.GetFileName(Request.Url.AbsolutePath)
    Dim view As DataView = New DataView(dt)
    view.RowFilter = "ParentMenuId=0"
    For Each row As DataRowView In view
        Dim menuItem As MenuItem = New MenuItem With {
            .Value = row("MenuId").ToString(),
            .Text = row("Title").ToString(),
            .NavigateUrl = row("Url").ToString(),
            .Selected = row("Url").ToString().EndsWith(currentPage, StringComparison.CurrentCultureIgnoreCase)
        AddChildItems(dt, menuItem)
End Sub

Private Sub AddChildItems(ByVal table As DataTable, ByVal menuItem As MenuItem)
    Dim viewItem As DataView = New DataView(table)
    viewItem.RowFilter = "ParentMenuId=" & menuItem.Value
    For Each childView As DataRowView In viewItem
        Dim childmenuItem As MenuItem = New MenuItem With {
            .Value = childView("MenuId").ToString(),
            .Text = childView("Title").ToString(),
            .NavigateUrl = childView("Url").ToString()
        AddChildItems(table, childmenuItem)
End Sub