I am experiencing an issue with creating a nested menu within my navigation header. Specifically, under the "Reports" section, I want to have two submenu items named "Global Shop" and "Ndustrios". When hovering over either of these submenus, additional menu items should appear. However, the problem I am facing is that currently, when hovering over "Reports", all submenu options are displayed at once instead of each individual submenu item showing separately. This means that while "Global Shop" displays its submenu options like Inventory, Sales Orders, etc., "Ndustrios" does not show any submenu items.
Here is what I have attempted:
#nav_ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #1D3567;
text-align: center;
}
li {
display: inline-block;
}
li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 24px 16px;
text-decoration: none;
}
.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #1D3567;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: White;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content ul {
display: none;
position: absolute;
left: 100%;
top: 75;
}
.dropdown-content:hover ul {
display: block;
}<nav>
<ul id="nav_ul">
<li class="dropdown">
<a href="#Reports">Reports</a>
<div class="dropdown-content">
<a href="#GS">Global Shop</a>
<div class="dropdown-content">
<a href="Inventory.html">Inventory</a>
<a href="sales.html">Sales Orders</a>
<a href="quotes.html">Quotes</a>
<a href="workOrder.html">Work Orders</a>
<a href="prtUsed.html">Part Where Used</a>
</div>
<a href="#ND">Ndustrios</a>
</div>
</li>
</ul>
<nav>