Q:

Why are the links in my dropdown button not appearing when I hover over it?

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.
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. 
This is part of my navbar from my layout page in my asp.net core web app:

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;
}
<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
                        <i class="fa fa-caret-down"></i>
                    </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.
[Edit]:  When I run the code snippet on here the drop down button does in fact work and displays the 3 links however, when I run it on my web app all I see is the button "Drop Down" then when I hover over it nothing else happens, no links appear under the button.

A:

Okay I figured it out.  My dropdown button was conflicting with bootstrap's dropdown class and therefore I had to rename my dropdown menu in my css to something that didn't match that of bootstraps.  This did in fact work and produced a hoverable dropdown button.

