Verticaal CSS drop down menu

Voorbeeld verticaal CSS drop down menu

Hier onder is een voorbeeld van een verticale CSS sidebar horiztontale menu.
In de stylesheet staan een paar unicode tekens. Menu is zichtbaar, maar verschoven. Zodat deze niet zichtbaar in de browser is. Heb niet gevonden waar ik de stylesheet eigenschap "visibility: hidden" kan gebruiken. Om de menu ontzichtbaar te maken.

HTML code en javascript

<nav>
  <div class="navbar">
    <div class="container nav-container">
      <input class="checkbox" type="checkbox">
      <div class="hamburger-lines">
        <span class="line line1"></span>
        <span class="line line2"></span>
        <span class="line line3"></span>
      </div>
      <ul id="navmenu" class="menu-items">
        <li><a href="#">Begin pagina</a></li>
        <li><a class="dir" href="#">Aantekeningen</a>
          <ul>
            <li><a href="#">Apache PHP webserver</a></li>
            <li><a href="#">List of editors</a></li>
            <li><a href="#">Firefox</a></li>
            <li><a href="#">Linux</a></li>
            <li><a href="#">Semiconductor</a></li>
            <li><a href="#">Thunderbird</a></li>
            <li><a class="dir" href="#">Voorbeelden</a>
              <ul>
                <li><a class="dir" href="#">Kolommen</a>
                  <ul>
                    <li><a href="#">2 kolommen layout</a></li>
                    <li><a href="#">3 kolommen layout</a></li>
                  </ul>
                </li>
                <li><a class="dir" href="#">PHP Formulier</a>
                  <ul>
                    <li><a href="#">PHP Formulier 1</a></li>
                    <li><a href="#">PHP Formulier 2</a></li>
                  </ul>
                </li>
                <li><a class="dir" href="#">Drop down menu</a>
                  <ul>
                    <li><a class="dir" href="#">Horizontaal</a>
                      <ul>
                        <li><a href="#">Horizontaal drop down menu 1</a></li>
                        <li><a href="#">Horizontaal drop down menu 2</a></li>
                        <li><a href="#">Transition demo</a></li>
                        <li><a href="#">Horizontaal drop down menu 3</a></li>
                      </ul>
                    </li>
                    <li><a class="dir" href="#">Verticaal</a>
                      <ul>
                        <li><a href="#">Verticaal CSS drop down menu 1</a></li>
                        <li><a href="#">Verticaal CSS drop down menu 2</a></li>
                        <li><a href="#">Verticaal CSS drop down menu 3</a></li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li><a class="dir" href="#">Mouse tooltip</a>
                  <ul>
                    <li><a href="#">Mouse tooltip 1</a></li>
                    <li><a href="#">Mouse tooltip 2</a></li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="#">Sitemap</a></li>
      </ul>
    </div>
  </div>
</nav>

CSS code

nav {
  float: left;
  padding-top: 3em;
}

.container {
  width: 100%;
  margin: auto;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.nav-container input[type="checkbox"]:checked ~ .menu-items {
  transform: translateX(0);
}
.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
  transform: rotate(45deg);
}
.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
  transform: scaleY(0);
}
.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
  transform: rotate(-45deg);
}

.nav-container .checkbox {
  position: absolute;
  display: block;
  height: 32px;
  width: 32px;
  top: -30px;
  left: 20px;
  z-index: 5;
  opacity: 0;
  cursor: pointer;
}

.nav-container .hamburger-lines {
  height: 16px;
  width: 20px;
  position: absolute;
  top: -30px;
  left: 20px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.nav-container .hamburger-lines .line {
  display: block;
  height: 0.15em;
  background-color: #000;
  color: transparent;
}

.nav-container .hamburger-lines .line1 {
  transform-origin: 0% 0%;
  transition: transform 0.4s ease-in-out;
}

.nav-container .hamburger-lines .line2 {
  transition: transform 0.2s ease-in-out;
}

.nav-container .hamburger-lines .line3 {
  transform-origin: 0% 100%;
  transition: transform 0.4s ease-in-out;
}

/* i.v.m. roll-out menu */
.navbar .menu-items {
  transform: translate(-15em);
  transition: transform 0.5s ease-in-out;
}

ul#navmenu,
ul#navmenu li,
ul#navmenu ul {
  margin: 0;
  padding: 0;
  width: 12.3em; /* for khtml */
  list-style: none;
  box-shadow: 10px 10px 10px DarkSlateGray;
  background: linear-gradient(to top, silver 0%, #fff 100%);
}

ul#navmenu, ul#navmenu ul {border-bottom: 1px solid #000;}

ul#navmenu:after /*From IE 7 lack of compliance*/{
  clear: both;
  display: block;
  content: ".";
  height: 0;
  visibility: hidden;
}

ul#navmenu li {
  float: left; /*For IE 7 lack of compliance*/
  position: relative;
}

/* Root Menu */
ul#navmenu a {
  padding: 5px;
  display: block;
  color: #000;
  background-color: transparent;
  background: linear-gradient(to top, silver 0%, #fff 100%); /* IE6, Firefix Bug */
  text-decoration: none;
  height: auto !important;
  border-top: 1px solid #000000;
  border-left: 1px solid #000000;
  border-right: 1px solid #000000;
  border-bottom: 0px solid #000000;
}

ul#navmenu a.dir:before {content: "\25BA"; float: right;} /* "\271A" = een plus */
ul#navmenu a.dir:hover,
ul#navmenu li:hover a.dir:hover,
ul#navmenu li:hover li:hover a.dir:hover,
ul#navmenu li:hover li:hover li:hover a.dir:hover {
  color: red;
  background-color: transparent;
  animation: mymove 0.5s infinite;
}

@keyframes mymove {
  100% {
    color: #39ff14;
    background-color: transparent;
  }
}

/* Root Menu Hover Persistence */
ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
  color: #000;
  background-color: transparent;
  background: linear-gradient(to top, gold 0%, #fff 100%); /* IE6, Firefox Bug */
}

/* 2nd Menu */
ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {
  color: #000;
  background-color: transparent;
  background: linear-gradient(to top, silver 0%, #fff 100%); /* IE6, Firefix Bug */
}

/* 2nd Menu Hover Persistence */
ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul#navmenu li.iehover li.iehover a {
  color: #000;
  background-color: transparent;
  background: linear-gradient(to top, gold 0%, #fff 100%);
}

/* 3rd Menu */
ul#navmenu li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li a {
  color: #000;
  background-color: transparent;
  background: linear-gradient(to top, silver 0%, #fff 100%); /* IE6, Firefix Bug */
}

/* 3rd Menu Hover Persistence */
ul#navmenu li:hover li:hover li a:hover,
ul#navmenu li:hover li:hover li:hover a,
ul#navmenu li.iehover li.iehover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover a {
  color: #000;
  background-color: transparent;
  background: linear-gradient(to top, gold 0%, #fff 100%);
}

/* 4thd Menu */
ul#navmenu li:hover li:hover li:hover li a,
ul#navmenu li.iehover Li.iehover li.iehover li a {
  color: #000;
  background-color: transparent;
  background: linear-gradient(to top, silver 0%, #fff 100%); /* IE6, Firefix Bug */
}

/* 4th Menu Hover Persistence */
ul#navmenu li:hover li:hover li:hover li a:hover,
ul#navmenu li:hover li:hover li:hover li:hover a,
ul#navmenu li.iehover li.iehover li.iehover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover li.iehover a {
  color: #000;
  background-color: transparent;
  background: linear-gradient(to top, gold 0%, #fff 100%);
}

/* 5thd Menu */
ul#navmenu li:hover li:hover li:hover li:hover li a,
ul#navmenu li.iehover li.iehover Li.iehover li.iehover li a {
  color: #000;
  background-color: transparent;
  background: linear-gradient(to top, silver 0%, #fff 100%); /* IE6, Firefix Bug */
}

/* 5th Menu Hover Persistence */
ul#navmenu li:hover li:hover li:hover li:hover li a:hover,
ul#navmenu li:hover li:hover li:hover li:hover li:hover a,
ul#navmenu li.iehover li.iehover li.iehover li.iehover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover li.iehover li.iehover a {
  color: #000;
  background-color: transparent;
  background: linear-gradient(to top, gold 0%, #fff 100%);
}

ul#navmenu ul,
ul#navmenu ul ul,
ul#navmenu ul ul ul
ul#navmenu ul ul ul ul {
  display: none;
  position: absolute;
  top: 0;
  left: 12.3em;
}

/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li:hover ul ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul,
ul#navmenu li.iehover ul ul ul ul {
  display: none;
}

ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu ul ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul,
ul#navmenu ul ul li.iehover ul,
ul#navmenu ul ul ul li.iehover ul {
  display: block;
}