<!--

Forum question answer only:

https://www.sitepoint.com/community/t/submenu-list-menu-with-three-levels/452291/5

-->

<nav id="menu">
  <header class="major">
    <h2>Menu</h2>
  </header>
  <ul>
    <li><a href="index.html">Homepage</a></li>
    <li><a href="introduzione.html">Introduzione</a></li>
    <li>
      <span class="opener">Arcani maggiori</span>
      <ul>
        <li><a href="arcani-maggiori-il-matto.html">Il Matto</a></li>
        <li><a href="arcani-maggiori-il-mago.html">Il Mago</a></li>
        <li><a href="arcani-maggiori-la-papessa.html">La Papessa</a></li>
        <li><a href="arcani-maggiori-limperatrice.html">L'imperatrice</a></li>
      </ul>
    </li>
    <li>
      <span class="opener">Arcani minori</span>
      <ul>
        <li>
          <span class="opener">Le Spade</span>
          <ul>
            <li><a href="arcani-minori-le-spade.html">Asso di Spade</a></li>
            <li><a href="arcani-minori-le-spade.html">Due di Spade</a></li>
          </ul>
        </li>
        <li><a href="strumenti.html">Strumenti</a></li>
      </ul>
    </li>
  </ul>
</nav>

/* Menu */
#menu ul {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: #3d4449;
  font-family: "Roboto Slab", serif;
  font-weight: 400;
  letter-spacing: 0.075em;
  list-style: none;
  margin-bottom: 0;
  padding: 0;
  text-transform: uppercase;
}
#menu ul a,
#menu ul span {
  border-bottom: 0;
  color: inherit;
  cursor: pointer;
  display: block;
  font-size: 0.9em;
  padding: 0.625em 0;
}
#menu ul a:hover,
#menu ul span:hover {
  color: #f56a6a;
}
#menu ul a.opener,
#menu ul span.opener {
  transition: color 0.2s ease-in-out;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  position: relative;
}
#menu ul a.opener:before,
#menu ul span.opener:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  text-transform: none !important;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}
#menu ul a.opener:before,
#menu ul span.opener:before {
  transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
  color: #9fa3a6;
  content: "\f078";
  position: absolute;
  right: 0;
}
#menu ul a.opener:hover:before,
#menu ul span.opener:hover:before {
  color: #f56a6a;
}
#menu ul a.opener.active + ul,
#menu ul span.opener.active + ul {
  display: block;
}
#menu ul a.opener.active:before,
#menu ul span.opener.active:before {
  transform: rotate(-180deg);
}

#menu > ul > li {
  border-top: solid 1px rgba(210, 215, 217, 0.75);
  margin: 0.5em 0 0 0;
  padding: 0.5em 0 0 0;
}
#menu > ul ul {
  color: #9fa3a6;
  display: none;
  margin: 0.5em 0 1.5em 0;
  padding-left: 1em;
}
#menu > ul > li > ul a,
#menu > ul > li > ul span {
  font-size: 0.8em;
}
#menu > ul > li > ul > li {
  margin: 0.125em 0 0 0;
  padding: 0.125em 0 0 0;
}
#menu > ul > li:first-child {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

(function () {
  document.querySelectorAll("#menu .opener").forEach((opener) => {
    opener.addEventListener("click", function () {
      this.classList.toggle("active");
      const subMenu = this.nextElementSibling;
      if (subMenu && subMenu.tagName === "UL") {
        var menuitems = subMenu.querySelectorAll(".active");

        for (var i = 0, len = menuitems.length; i < len; i++) {
          menuitems[i].classList.remove("active");
        }
      }
    });
  });
})();