I have encountered an issue with my navigation bar code. Specifically, when I click on the Users dropdown in the top navigation bar, I am not able to see any items in the sub-menu:
<nav>
<ul>
<li><img style="margin-right:20px;font-family:sans-serif" class="logo" src="~/Images/Logo.png" width="60" height="60" runat="server" /><span style="font-size:20px">company Name</span> </li>
<li style="margin-right:30%"> </li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Users
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Details</a>
<a class="dropdown-item" href="#">Department</a>
<a class="dropdown-item" href="#">Sections</a>
</div>
</li>
<li><a href="#">Admin</a></li>
<li><a href="#">Two</a></li>
<li><a href="http://google.com/">One</a></li>
</ul>
</nav>
For reference, below is the stylesheet being utilized:
<style>
body {
margin: 0;
padding: 0;
font-size: 15px;
}
nav {
background-color:darkcyan;
margin: 0;
overflow: hidden;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
list-style-type: none;
}
nav ul li a {
color: white;
display: block;
line-height: 3em;
padding: 1em 3em;
text-decoration: none;
}
nav ul li a.logo {
}
li {
float:left;
}
li:first-child {
float: left;
}
</style>
Upon clicking on the dropdown for users, I am seeing a white box instead of expected content. Here is what it looks like:
https://i.sstatic.net/tGEev.png
Any assistance or guidance regarding this issue would be greatly appreciated. Thank you.