Why does my dropdown button in my ASP.NET core 2.2 web app not reveal the links under the button when hovering over it?

See more:

HTML

bootstrap

ASP.NET-Core

I am trying to add a dropdown button that displays a few links when the mouse hovers over the button, when I tried implementing the css for this everything appears to work fine except the actual links are not being displayed under the button.

This is part of my css:

a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}


/* The dropdown container */

.dropdown {
  float: left;
  overflow: hidden;
}


/* Dropdown button */

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: black;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}


/* Add a red background color to navbar links on hover */

.dropdown:hover .dropbtn {
  background-color: lightgray;
}


/* Dropdown content (hidden by default) */

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #ff6a00;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}


/* Links inside the dropdown */

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}


/* Add a grey background color to dropdown links on hover */

.dropdown-content a:hover {
  background-color: #ddd;
}


/* Show the dropdown menu on hover */

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

This is part of my navbar from my layout page in my asp.net core web app:

<header>
    <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
        <div class="container-fluid">
            <a class="navbar-brand" asp-area="" asp-page="/Index">Demo</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row ">
                <ul class="navbar-nav flex-grow-1">
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
                    </li>
                </ul>
                <div class="dropdown">
                    <button class="dropbtn">
                        Dropdown
                        class="fa fa-caret-down">
                    </button>
                    <div class="dropdown-content">
                        <a href="#">Link 1</a>
                        <a href="#">Link 2</a>
                        <a href="#">Link 3</a>
                    </div>
                </div>
            </div>

        </div>
    </nav>
</header>

The dropdown button works and gets highlighted when I hover over it but the dropdown menu links do not appear under the button.

I ran a code snippet online to see how it works and it does in fact show the links when you hover over the drop down button, however when I run this same code in my asp.net webapp, hovering over the dropdown button does not reveal the links under the button. Not sure why the code snippet works online but not in my webapp

What I have tried:

I tried playing around with different style sheets for drop down buttons and the different bootstrap functions but they either lose the button or the same issue occurs. I also tried adding text-decoration to see if it was just blended into the background but it is not.