Bootstrap ASP.net MVC Dropdown menu not visible - html

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">
#menu.DisplayName
#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
What is the issue with regard to this.

Answer 1

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>