Submenu on Menu hover

Question

I have a problem, I would like to put a second submenu, but in a way that I don't know I can't do it, either the second submenu is displayed at the bottom of the first, or some either the menu on which you are it displays the first submenu. Please help me to be able to have several menus with several submenu 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>

But when i hover the second menu item Item1, it only shows me the Subitem1,Subitem2, Subitem3 but not the Subitem1-1. This is the Script

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>

I want to open a the SubItems 1-1, when i hover on Item2 Thank you for you help.

Answer 1

This example will help you with adding sub-menus and styling it.