Default menu in asp.net mvc5 submenu

Question

Do you know why I cant see any of subitem on "Settings" link? When I click on Settings, its just inactive And another question, how can I put small icon next to Settings? something like "wheel"?

<div class="navbar navbar-inverse navbar-fixed-top">
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    @Html.ActionLink("Log Off", "LogOff", "Login")
                </li>
            </ul>
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    @Html.ActionLink("AdeccoDoc", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
                </div>
                <div class="navbar-collapse collapse navbar-left">
                    <ul class="nav navbar-nav" style="font-weight: bold;">
                        <li class="dropdown">
                        <li>@Html.ActionLink("AdeccoView", "Index", "AdeccoViews")</li>
                        <li>@Html.ActionLink("Pipeline", "Index", "Pipelines")</li>
                        <li>@Html.ActionLink("Clients", "Index", "Clients")</li>
                        <li>@Html.ActionLink("Planned Meetings", "Index", "Comments")</li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Settings<b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li>@Html.ActionLink("Event Type", "Index", "EventTypes")</li>
                                <li>@Html.ActionLink("Field of Cooperation", "Index", "FCOes")</li>
                                <li>@Html.ActionLink("Employees", "Index", "Employees")</li>
                                <li>@Html.ActionLink("Event Type", "Index", "PTDatas")</li>
                                <li>@Html.ActionLink("Event Type", "Index", "PTDatas")</li>
                            </ul>
                        </li>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

score 3 · Accepted Answer · answered Jan 11 '16 at 09:12

DEMO for ease:

Every thing seems good, may be you have not put bootstrap css refrences and jquery reference.

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
 <div class="navbar navbar-inverse navbar-fixed-top">
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                </li>
            </ul>
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                  
                </div>
                <div class="navbar-collapse collapse navbar-left">
                    <ul class="nav navbar-nav" style="font-weight: bold;">
                        <li class="dropdown">
                       
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span>Settings<b class="caret"></b></a>
                            <ul class="dropdown-menu">
                             <li><a>g</a></li>
                                <li><a>g</a></li>
                                <li><a>g</a></li>
                            </ul>
                        </li>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
</div>

Thanks! It worked for me, only I want to be local files..but tnx anyway! — Stefan0309, Jan 11 '16 at 09:19

score 0 · Answer 2 · answered Jun 18 '17 at 09:07

The following code works for me for multi level menu

CSS:

<style>
    .dropdown-submenu
    {
        position: relative;
    }

    .dropdown-submenu .dropdown-menu
    {
        top: 0;
        left: 100%;
        margin-top: -1px;
    }
</style>

Script:

    <script>
    $(document).ready(function () {
        $('.dropdown-submenu a.submenu').on("click", function (e) {
            $(this).next('ul').toggle();
            e.stopPropagation();
            e.preventDefault();
        });
    });
</script>

HTML:

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar">
                </span>
            </button>
            @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
        </div>
        <div class="navbar-collapse collapse navbar-left">
            <ul class="nav navbar-nav">
                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                <li>@Html.ActionLink("About", "About", "Home")</li>
                <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><span
                    class="glyphicon glyphicon-cog"></span>Settings<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a>q</a></li>
                        <li><a>qwq</a></li>
                        <li><a>eeq</a></li>
                        <li class="dropdown-submenu"><a href="#" class="submenu" data-toggle="dropdown"><span
                            class="glyphicon glyphicon-cog"></span>Sub Settings<b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a>g</a></li>
                                <li><a>qq</a></li>
                                <li><a>wqw</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="navbar-collapse collapse navbar-right">
            @Html.Partial("_LoginPartial")
        </div>
    </div>
</div>

Default menu in asp.net mvc5 submenu

2 Answers2