Почему моя выпадающая кнопка в моем ASP.NET ядро 2.2 веб-приложение не раскрывает ссылки под кнопкой при наведении на нее курсора мыши?

---

Я пытаюсь добавить выпадающую кнопку, которая отображает несколько ссылок, когда мышь нависает над кнопкой, когда я попытался реализовать css для этого, все, кажется, работает нормально, за исключением того, что фактические ссылки не отображаются под кнопкой.

Это часть моего 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;
}

Это часть моей навигационной панели с моей страницы макета в моем asp.net основное веб-приложение:

<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
                        
                    </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>

Кнопка выпадающего меню работает и подсвечивается, когда я навожу на нее курсор, но ссылки выпадающего меню не появляются под кнопкой.

Я запустил фрагмент кода в интернете, чтобы посмотреть, как он работает, и он действительно показывает ссылки, когда вы наводите курсор мыши на кнопку выпадающего списка, однако когда я запускаю этот же код в своем asp.net webapp, наведя курсор на раскрывающуюся кнопку, не показывает ссылки под этой кнопкой. Не знаю, почему фрагмент кода работает в интернете, но не в моем веб-приложении

Что я уже пробовал:

Я пробовал играть с различными таблицами стилей для выпадающих кнопок и различных функций начальной загрузки, но они либо теряют кнопку, либо возникает та же проблема. Я также попытался добавить текстовое оформление, чтобы увидеть, было ли оно просто смешано с фоном, но это не так.

---