Bootstrap ASP.net MVC Dropdown menu not visible

Question

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.

Are you including the Bootstrap js file on your page?

Andy Brudtkuhl
– Andy Brudtkuhl

2013-06-25 13:59:23 +00:00
Commented Jun 25, 2013 at 13:59 — Andy Brudtkuhl
– Andy Brudtkuhl, Commented Jun 25, 2013 at 13:59
Yes i have included it

Desmond
– Desmond

2013-06-27 04:05:53 +00:00
Commented Jun 27, 2013 at 4:05 — Desmond
– Desmond, Commented Jun 27, 2013 at 4:05

Andy Brudtkuhl · Accepted Answer · 2013-06-25 14:12:12Z

Make sure you have included the bootstrap.js file on that page.
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>

Collectives™ on Stack Overflow

Bootstrap ASP.net MVC Dropdown menu not visible

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related