nested dropdown menu

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">
      <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>

SkylarP · Accepted Answer · 2022-03-03 21:46:36Z

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"><a href="#">Home</a></li>
  <li class="parent"><a href="URL">Outlook Web</a></li>
  <li class="parent"><a href="#">Production</a>
    <ul class="child">
        <li class="parent"><a href="URL">South</a></li>
        <li class="parent"><a href="URL">Enclosure Systems</a></li>
        <li class="parent"><a href="URL">South</a></li>
        <li class="parent"><a href="http:">Factory Andon</a></li>
        <li class="parent"><a href="http:">Web Docs</a></li>
    </ul>
</li>
<li class="parent"><a href="#">IT</a>
    <ul class="child">          
        <li><a href="http://kb">Knowledge Base</a></li>
        <li><a href="http:/">Submit a Ticket</a></li>
        <li class="parent"><a href="http:">Archived Links</a></li>
    </ul>
</li>
<li class="parent"><a href="#">Office Directories</a>
    <ul class="child">          
        <li><a href="http://">Hennig</a></li>
        <li><a href="http:/">AME</a></li>
    </ul>
</li>
<li class="parent"><a href="ht">Hennig Parts</a></li>
<li class="parent"><a href="">Factory Andon</a></li>
<li class="parent"><a href="https:">Business Cards</a></li>
<li class="parent"><a href="#">Reports</a>
    <ul class="child">
        <li class="parent"><a href="#">Global Shop<span class="expand">&raquo;</span></a>
            <ul class="child">
                <li><a href="inventory">Inventory Report</a></li>
                <li><a href="sales.">Sales Report</a></li>
                <li><a href="quotes">Quotes Report</a></li>
                <li><a href="workOrder">Work Order Report</a></li>
                <li><a href="prtUsed">Part Where Used Report</a></li>
            </ul>
        </li>
        <li class="parent"><a href="#">Ndustrios<span class="expand">&raquo;</span></a>
        </li>
    </ul>
</li>

The HTML structure looks much better Skylar well done. Good luck, keep coding.

KJEK-Code · Accepted Answer · 2022-03-02 22:39:54Z

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">
      <a href="#Reports">Reports</a>
      <ul class="dropdown-content">
        <li class="dropdown-sub">
          <a href="#GS">Global Shop</a>
          <ul class="dropdown-sub-list">
            <li><a href="Inventory.html">Inventory</a></li>
            <li><a href="sales.html">Sales Orders</a></li>
            <li><a href="quotes.html">Quotes</a></li>
            <li><a href="workOrder.html">Work Orders</a></li>
            <li><a href="prtUsed.html">Part Where Used</a></li>
          </ul>
        </li>
        <li><a href="#ND">Ndustrios</a></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">
    <a href="#">hover item</a>
    <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><a href="#">sub link</a></li>
        <li><a href="#">sub link</a></li>
        <li><a href="#">sub link</a></li>
        <li><a href="#">sub link</a></li>
        <li><a href="#">sub link</a></li>
      </ul>
      </li>
      <li><a href="#">standard link</a></li>
    </ul>
  </li>
<ul>

Thank you for your post. I was able to kind of get what I wanted with your top answer by putting the Ndustrios line above the global shop one.

Collectives™ on Stack Overflow

nested dropdown menu

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related