Dropdown Menu Won't Drop Down-CodePudding

Below is the relevant HTML for my _Layout.cshtml page. My issue is that when you click the dropdown menu, Supporting Tables, nothing happens - nothing drops down. I have even tried many other examples after searching Google, but none worked. Finally, one stylesheet link from an online how-to worked, but it changed the styles of my page, so am looking for a solution that won't do that.

Would appreciate it if someone could take a look and see what I might have wrong/be missing. I think it must be a script src or stylesheet link, but I do not know which one I would need to add or replace. Very new to this, so am sorry for my ignorance. Thank you!

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - EmergencyContactsWeb</title>
    <link rel="stylesheet" href="~/css/bootswatch_darkly.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</head>
<body>
    <header>
        <nav >
            <div >
                <a  asp-area="" asp-page="/Index">PHECWeb</a>
                <button  type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span ></span>
                </button>
                <div >
                    <ul >
                        <li >
                            <a  asp-area="" asp-page="/Index">Home</a>
                        </li>
                        <li >
                            <a  asp-area="" asp-page="/InfoSites/Index">Site Information</a>
                        </li>
                        <!--Dropdown Below-->
                        <li >
                        <a  href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            Supporting Tables</a>
                                    <ul  aria-labelledby="navbarDropdown">
                                        <a  asp-area="" asp-page="/MDSpecialties/Index">MD Specialities</a>
                                        <a  asp-area="" asp-page="/ResCategories/Index">Residence Categories</a>
                                    </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div >...

CodePudding user response：

You are using bootstrap but cdn of bootstrap CSS is not included in your head tag. The only thing you have to do is to add this to your head tag :

<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
  integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
  crossorigin="anonymous"
/>

Please feel free to ask in the comment section if there is still any problem and please upvote if you like:). Thank you!

CodePudding user response：

Found this on another stackoverflow post (I had searched here prior to posting the question, but must have used other search terms. I found this on Google.)

I needed to include these script srcs under my link rels and in this order:

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4 1nzFpr53nxSS GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

The link to the original solution is here: Bootstrap 4 Dropdown Menu not working?

Hope that can help others! I had no idea there was a particular order.