嵌套下拉菜单

Question

我正在尝试在我的导航中制作一个嵌套菜单 header。在 Reports 下应该有两个菜单项 Global Shop 和 Ndustrios。然后，如果我将鼠标悬停在其中任何一个上，应该会显示更多项目。目前，报告下发生的是悬停时显示在其下方的所有选项。所以它显示：全球商店、库存、销售订单等。但 Ndustrios 没有出现。

这是我尝试过的：

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

Answer 1

您需要对 HTML 进行一些重组，并在 li 中使用另一个列表来包含更多链接。但是，您仍然会遇到一个非常严重的问题。如果您不再悬停子菜单项并且列表变短，那么您将不再悬停任何内容。例如：将鼠标悬停在报告上，然后是全球商店，然后尝试将鼠标悬停在 Ndustrios 上。你不能这样做，因为一旦你离开下拉子<li>，列表就会缩小，让你一无所有。你有两个选择。 1. 将 Ndustrios 放在下拉菜单上方或 2. 使下拉菜单出现在点击而不是悬停时

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

如果您对在下拉菜单中使用下拉菜单死心塌地，这里有一个悬停单击下拉组合的简单示例。如果您愿意使用此方法，也可以使顶级下拉菜单可点击。

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>

Answer 2

我找到了以下代码并对其进行了修改以反映我的需要。嵌套下拉菜单完美运行

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

嵌套下拉菜单

nested dropdown menu

html

css

drop-down-menu