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;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: black;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown:hover .dropbtn {
background-color: lightgray;
}
.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;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.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.