菜单悬停上的子菜单

Question

我有一个问题，我想放第二个子菜单，但以一种我不知道我做不到的方式，要么第二个子菜单显示在第一个子菜单的底部，要么显示一些您所在的菜单显示第一个子菜单。 请帮助我能够拥有多个带有多个子菜单的菜单 html

<header id="header">
  <h1>Voyager Menu</h1>
  <ul class="menu">
    <li id="hover">Item1</li>
    <li id="hover2">Item2</li>
    <li>Item3</li>
    <li>Item4</li>
  </ul>
  <div class="sous-menu">
    <ul id="inv-hover">
      <li>Subitem1</li>
      <li>Subitem1</li>
      <li>Subitem1</li>
    </ul>
  </div>
  <div class="sous-menu">
    <ul id="inv-hover2">
      <li>Subitem1-1</li>
    </ul>
  </div>
</header>

但是当我将鼠标悬停在第二个菜单项 Item1 时，它只显示 Subitem1,Subitem2, Subitem3 而不是 Subitem1-1。 这是脚本

var head = document.getElementById("header");
var hover = document.getElementById("hover");
var hover2 = document.getElementById("hover2");
var invHover = document.getElementById("inv-hover");
var invHover2 = document.getElementById("inv-hover2");

hover.addEventListener("mouseover", expand);
hover2.addEventListener("mouseover", expand);
invHover.addEventListener("mouseover", expand);
invHover2.addEventListener("mouseover", expand);
head.addEventListener("mouseout", close);

function expand() {
  // hover.style.background = "#03a9f4";
  // hover.style.color = "#fff";
  head.className = "expand";
}

function close() {
  // hover.style.background = "#f4f4f4";
  // hover.style.color = "#000";
    head.className = "";
}

#header { 
  text-align:center;
  background:#fff;
  padding-top:25px;
  height: 88px;
  overflow:hidden;
  transition: .5s ease-in-out;
}

#header.expand {
  height: 128px;
  transition: .5s ease-in-out;
}

ul.menu {
  margin-top:10px;
}

ul.menu li {
  display:inline-block;
  padding: 0 20px;
  line-height:40px;
  text-transform: uppercase;
  font-size: 14px;
  cursor: pointer;
}

ul.menu li:hover {
  background:#fff;
  color:rgb(0, 0, 0);
}

ul.menu {
  border-bottom: 1px solid rgb(187, 187, 187);
}
.sous-menu {
  text-align:center;
  color:rgb(0, 0, 0);
}
ul#inv-hover {
  background:#fff;
  height:100%;
}

ul#inv-hover li {
  display:inline-block;
  padding: 0 20px;
  cursor:pointer;
  line-height:40px;
}

section {
  height: 100vh;
  background: #000;
  text-align:center;
  padding:50px 0;
}

section h1 {
  color:#fff;
}

<header id="header">
  <h1>Voyager Menu</h1>
  <ul class="menu">
    <li id="hover">Item1</li>
    <li id="hover2">Item2</li>
    <li>Item3</li>
    <li>Item4</li>
  </ul>
  <div class="sous-menu">
    <ul id="inv-hover">
      <li>Subitem1</li>
      <li>Subitem1</li>
      <li>Subitem1</li>
    </ul>
  </div>
  <div class="sous-menu">
    <ul id="inv-hover2">
      <li>Subitem1-1</li>
    </ul>
  </div>
</header>

当我将鼠标悬停在 SubItems 1-1 上时，我想打开一个 Item2 谢谢你的帮助。

Answer 1

This 示例将帮助您添加子菜单并为其设置样式。