CODEWITHSUNDEEP
htmltwitter-bootstrapdrop-down-menu
Desmond
Desmond

Reputation: 1368

Bootstrap ASP.net MVC Dropdown menu not visible

This is the partial view that generates the menu for the site.

<div class="nav-collapse collapse">
            <!-- .nav, .navbar-search, .navbar-form, etc -->
            <ul class="nav" >
                @foreach (var menu in Model)
                {
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">@menu.DisplayName</a>
                        @foreach (var menuitem in menu.MenuItems)
                        {
                            <ul class="dropdown-menu" >
                                <li class="dropdown">@Html.ActionLink(menuitem.DisplayName, menuitem.ActionName, menuitem.ControllerName, new { tabindex = "-1" })</li>
                            </ul>
                        }
                    </li>
                }
            </ul>
        </div>

The menus can be visible and actually the dropdown menus are also created in the HTML as shown below

<div class="navbar-inner">
    <div class="container">

        <div class="nav-collapse collapse">
            <!-- .nav, .navbar-search, .navbar-form, etc -->
            <ul class="nav">
                    <li class="dropdown open">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">Training</a>
                            <ul class="dropdown-menu">
                                <li class="dropdown"><a tabindex="-1" href="/TTS.UI/Menu?Length=18">Attendance Confirmation</a></li>
                            </ul>
                    </li>
                    <li class="dropdown">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">ePARCS</a>
                            <ul class="dropdown-menu">
                                <li class="dropdown"><a tabindex="-1" href="/TTS.UI/Menu?Length=12">Upload</a></li>
                            </ul>
                    </li>
            </ul>
        </div>
    </div>
</div>

In out put is shown as bellow in the GUI

enter image description here

What is the issue with regard to this.

Upvotes: 1

Views: 2999

Answers (1)

Andy Brudtkuhl
Andy Brudtkuhl

Reputation: 3652

  1. Make sure you have included the bootstrap.js file on that page.
  2. Your markup is a bit off. The <li> in your dropdown menu should not have the "dropdown" class

Here is the jsFiddle -> http://jsfiddle.net/abrudtkuhl/GYSuY/

Here's markup that works, based on your example

<div class="navbar">
    <div class="navbar-inner">
        <div class="container">
            <div class="nav-collapse collapse">
                <ul class="nav">
                    <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">Training</a>

                        <ul class="dropdown-menu">
                            <li><a tabindex="-1" href="/TTS.UI/Menu?Length=18">Attendance Confirmation</a>

                            </li>
                        </ul>
                    </li>
                    <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">ePARCS</a>

                        <ul class="dropdown-menu">
                            <li> <a tabindex="-1" href="/TTS.UI/Menu?Length=12">Upload</a>

                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

Upvotes: 1

Related Questions