nested dropdown menu - html

Question

I am trying to make a nested menu in my nav header. Under Reports there should be two menu items Global Shop and Ndustrios. Then if I hover over either of them there should be more items to show. Currently what happens under Reports is all of the options below it show up when hovered. so it reads: Global Shop, Inventory, Sales Orders, etc.. but Ndustrios doesn't appear.
Here is what I have tried:
#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">
Reports
<div class="dropdown-content">
Global Shop
<div class="dropdown-content">
Inventory
Sales Orders
Quotes
Work Orders
Part Where Used
</div>
Ndustrios
</div>
</li>
</ul>
<nav>

Answer 1

I found the below code and modified it to reflect my needs. Nested drop downs working perfectly
.parent {display: block;position: relative;float: left;line-height:30px;background-color: #1D3567;}
.parent a{margin: 10px;color: #FFFFFF;text-decoration: none;}
.parent:hover > ul {display:block;position:absolute;}
.child {display: none;}
.child li {background-color: #1D3567;line-height: 30px;border-bottom:#CCC 1px solid;border-right:#CCC 1px solid; width:100%;}
.child li a{color: #FFFFFF;}
ul{list-style-type: none;margin: 0;padding: 0px; min-width:15em;}
ul ul ul{left: 100%;top: 0;margin-left:1px;}
li:hover {background-color: #95B4CA;}
.parent li:hover {background-color: #95B4CA;}
<ul id="nav_ul">
<li class="parent">Home</li>
<li class="parent">Outlook Web</li>
<li class="parent">Production
<ul class="child">
<li class="parent">South</li>
<li class="parent">Enclosure Systems</li>
<li class="parent">South</li>
<li class="parent">Factory Andon</li>
<li class="parent">Web Docs</li>
</ul>
</li>
<li class="parent">IT
<ul class="child">
<li>Knowledge Base</li>
<li>Submit a Ticket</li>
<li class="parent">Archived Links</li>
</ul>
</li>
<li class="parent">Office Directories
<ul class="child">
<li>Hennig</li>
<li>AME</li>
</ul>
</li>
<li class="parent">Hennig Parts</li>
<li class="parent">Factory Andon</li>
<li class="parent">Business Cards</li>
<li class="parent">Reports
<ul class="child">
<li class="parent">Global Shop<span class="expand">»</span>
<ul class="child">
<li>Inventory Report</li>
<li>Sales Report</li>
<li>Quotes Report</li>
<li>Work Order Report</li>
<li>Part Where Used Report</li>
</ul>
</li>
<li class="parent">Ndustrios<span class="expand">»</span>
</li>
</ul>
</li>

Answer 2

You will need to do some restructuring to your HTML and use another list inside your li to contain more links. You will still be left with a pretty serious issue though. If you no longer hover the submenu item and the list gets shorter and then you are no longer hovering anything. For example: hover over reports then global shop and try to hover over Ndustrios. You cannot do it because once you leave the drop down sub <li> the list will shrink leaving you with nothing. You have two options. 1. Place Ndustrios above the dropdown or 2. Make the dropdowns appear on click instead of on hover
#nav_ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #1D3567;
text-align: center;
}
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;
z-index: 1;
list-style: none;
}
.dropdown-content a {
color: White;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-sub-list{
display: none;
list-style: none;
margin: 0;
}
.dropdown:hover > .dropdown-content {
display: block;
}
.dropdown-sub:hover > .dropdown-sub-list {
display: block;
}
<nav>
<ul id="nav_ul">
<li class="dropdown">
Reports
<ul class="dropdown-content">
<li class="dropdown-sub">
Global Shop
<ul class="dropdown-sub-list">
<li>Inventory</li>
<li>Sales Orders</li>
<li>Quotes</li>
<li>Work Orders</li>
<li>Part Where Used</li>
</ul>
</li>
<li>Ndustrios</li>
</ul>
</li>
</ul>
</nav>
If you are dead set on using dropdowns inside of dropdowns here is a simple example of a hover click dropdown combo. You can also make the top level dropdown clickable if you would like using this method.
const dropdownBtns = document.querySelectorAll(".dropdown-button");
const dropdownItem = document.querySelectorAll(".dropdown-item");
const subDropdown = document.querySelectorAll(".sub-dropdown");
const handleClick = (event) => {
const targetBtn = event.target;
const ariaExpanded = targetBtn.getAttribute("aria-expanded");
const ariaControls = targetBtn.getAttribute("aria-controls");
const controlledAria = document.getElementById(ariaControls);
if(ariaExpanded === "false") {
controlledAria.classList.add("active");
controlledAria.setAttribute("aria-hidden", "false");
targetBtn.setAttribute("aria-expanded", "true");
} else if (ariaExpanded === "true") {
controlledAria.classList.remove("active");
controlledAria.setAttribute("aria-hidden", "true");
targetBtn.setAttribute("aria-expanded", "false");
}
}
const handleLeave = () => {
dropdownBtns.forEach(button => button.setAttribute("aria-expanded", "false"));
subDropdown.forEach(ul => {
ul.classList.remove("active");
ul.setAttribute("aria-hidden", "true");
})
}
dropdownItem.forEach(item => item.addEventListener("mouseleave", handleLeave));
dropdownBtns.forEach(button => button.addEventListener("click", handleClick));
ul {
list-style: none;
padding: 0;
}
button {
background: transparent;
border: none;
width: 100%;
font-family: inherit;
font-size: inherit;
cursor: pointer;
}
a, button {
display: block;
padding: 10px;
border-bottom: 1px solid #ccc;
text-align: center;
}
a {
text-decoration: none;
color: inherit;
}
.dropdown {
display: none;
}
.dropdown-item:hover .dropdown {
display: block;
}
.sub-dropdown {
display: none;
}
.sub-dropdown.active {
display: block;
}
<ul>
<li class="dropdown-item">
hover item
<ul class="dropdown">
<li>
<button class="dropdown-button" aria-controls="dropdown1" aria-expanded="false">click item</button>
<ul id="dropdown1" class="sub-dropdown" aria-hidden="true">
<li>sub link</li>
<li>sub link</li>
<li>sub link</li>
<li>sub link</li>
<li>sub link</li>
</ul>
</li>
<li>standard link</li>
</ul>
</li>
<ul>