I have been attempting to include a dropdown button that reveals several links when the mouse hovers over it. Despite successfully implementing the CSS for this feature, I am encountering an issue where the links are not displayed beneath the button.
After experimenting with different style sheets and Bootstrap functions for dropdown buttons, I found that either the button would disappear or the same issue persisted.
This snippet is a portion of the navbar from my layout page on my ASP.NET Core web application:
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>Although the dropdown button highlights upon hovering, the dropdown menu links fail to appear underneath the button.
[Edit]: Upon testing the code snippet here, the dropdown button indeed works and displays the 3 links. However, when running it on my web application, only the button "Drop Down" shows up, and there are no links visible upon hovering over it.