Bootstrap dropdown menu not working within _Layout.cshtml Shared in MVC 4

Question

I am attempting to implement a dropdown menu in my shared _Layout and am unfortunately not successful.

Do you guys know what the issue is here:

    <nav>
        <div class="dropdown">
            <button class="btn" data-toggle="dropdown"> This that </button>
            <ul class="dropdown-menu">
                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                <li>@Html.ActionLink("About", "About", "Home")</li>
                <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
            </ul>
        </div>
    </nav>

When I do display: block on my ul I can see the drop down, however in the above case when I click the button nothing drops down.

Answer 1

Here is my workaround in case someone was still looking for.

   .dropdown:hover .dropdown-menu {display: block;}

   .nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu
     {margin-top: 0;}    

Answer 2

this may be useless now. but i wanted to share what the actual problem was.

I faced the same problem. the problem is importing both the normal and minified versions of bootstrap css files.

//wrong way

<link href="@Url.Content("~/Content/themes/vendor/bootstrap.min.css")" rel="stylesheet" />
<link href="@Url.Content("~/Content/themes/vendor/bootstrap-theme.min.css")" rel="stylesheet" />
 <link href="@Url.Content("~/Content/themes/vendor/bootstrap.css")" rel="stylesheet" />
<link href="@Url.Content("~/Content/themes/vendor/bootstrap-theme.css")" rel="stylesheet" />

//right way

<link href="@Url.Content("~/Content/themes/vendor/bootstrap.min.css")" rel="stylesheet" />
<link href="@Url.Content("~/Content/themes/vendor/bootstrap-theme.min.css")" rel="stylesheet" />