Dropdown-Menü implementiert durch HTML+CSS3+JS

<div Klasse="Container">
  <h1 class="title">Dropdown-Menü</h1>
  <ul>
    <li Klasse="Dropdown">
      <a href="#" data-toggle="dropdown">Erstes Menü <i class="icon-arrow"></i></a>
      <ul Klasse="Dropdown-Menü">
        <li><a href="#">Startseite</a></li>
        <li><a href="#">Über uns</a></li>
        <li><a href="#">Dienstleistungen</a></li>
        <li><a href="#">Kontakt</a></li>
      </ul>
    </li>
    <li Klasse="Dropdown">
      <a href="#" data-toggle="dropdown">Zweites Menü <i class="icon-arrow"></i></a>
      <ul Klasse="Dropdown-Menü">
        <li><a href="#">Startseite</a></li>
        <li><a href="#">Über uns</a></li>
        <li><a href="#">Dienstleistungen</a></li>
        <li><a href="#">Kontakt</a></li>
      </ul>
    </li>
    <li Klasse="Dropdown">
      <a href="#" data-toggle="dropdown">Drittes Menü <i class="icon-arrow"></i></a>
      <ul Klasse="Dropdown-Menü">
        <li><a href="#">Startseite</a></li>
        <li><a href="#">Über uns</a></li>
        <li><a href="#">Dienstleistungen</a></li>
        <li><a href="#">Kontakt</a></li>
      </ul>
    </li>
  </ul>
  <p Klasse="text-center">
    Sehen Sie dasselbe Menü nur mit CSS3: <a href="https://codepen.io/pedronauck/pen/jaluz" target="_blank">https://codepen.io/pedronauck/pen/jaluz</a>
  </p>
</div>

@import url("https://fonts.googleapis.com/css?family=Lato:300,400,700,900");
@import-URL (https://fonts.googleapis.com/css?family=Pacifico);
Körper {
  Schriftfamilie: „Lato“, Helvetica, Arial;
  Schriftgröße: 16px;
}

.text-center {
  Textausrichtung: zentriert;
}

*, *:vor, *:nach {
  -webkit-border-sizing: Rahmenbox;
  -moz-border-sizing: Rahmenbox;
  Rahmengröße: Rahmenbox;
}

.container {
  Breite: 350px;
  Rand: 50px automatisch;
}
.container > ul {
  Listenstil: keiner;
  Polsterung: 0;
  Rand: 0 0 20px 0;
}

.Titel {
  Schriftfamilie: „Pacifico“;
  Schriftstärke: Norma;
  Schriftgröße: 40px;
  Textausrichtung: zentriert;
  Zeilenhöhe: 1,4;
  Farbe: #2980B9;
}

.dropdown ein {
  Textdekoration: keine;
}
.dropdown [data-toggle="dropdown"] {
  Position: relativ;
  Anzeige: Block;
  Farbe: weiß;
  Hintergrund: #2980B9;
  -moz-box-shadow: 0 1px 0 #409ad5 Einschub, 0 -1px 0 #20638f Einschub;
  -webkit-box-shadow: 0 1px 0 #409ad5 Einschub, 0 -1px 0 #20638f Einschub;
  Box-Shadow: 0 1px 0 #409ad5 Einschub, 0 -1px 0 #20638f Einschub;
  Textschatten: 0 -1px 0 rgba(0, 0, 0, 0,3);
  Polsterung: 10px;
}
.dropdown [data-toggle="dropdown"]:hover {
  Hintergrund: #2c89c6;
}
.Dropdown .Symbolpfeil {
  Position: absolut;
  Anzeige: Block;
  Schriftgröße: 0,7em;
  Farbe: #fff;
  oben: 14px;
  rechts: 10px;
}
.dropdown .icon-arrow.öffnen {
  -moz-transform:drehen(-180 Grad);
  -ms-transform:drehen(-180Grad);
  -webkit-transform: drehen(-180 Grad);
  transformieren: drehen (-180 Grad);
  -moz-Übergang: -moz-Transform 0,6 s;
  -o-Übergang: -o-Transformation 0,6 s;
  -webkit-Übergang: -webkit-Transform 0,6 s;
  Übergang: Transformation 0,6 s;
}
.dropdown .icon-arrow.schließen {
  -moz-transform:drehen(0Grad);
  -ms-transform:drehen(0Grad);
  -webkit-transform: drehen(0 Grad);
  transformieren: drehen (0 Grad);
  -moz-Übergang: -moz-Transform 0,6 s;
  -o-Übergang: -o-Transformation 0,6 s;
  -webkit-Übergang: -webkit-Transform 0,6 s;
  Übergang: Transformation 0,6 s;
}
.dropdown .icon-arrow:vor {
  Inhalt: „\25BC“;
}
.dropdown .dropdown-menü {
  maximale Höhe: 0;
  Überlauf: versteckt;
  Listenstil: keiner;
  Polsterung: 0;
  Rand: 0;
}
.dropdown .dropdown-menü li {
  Polsterung: 0;
}
.dropdown .dropdown-menü li a {
  Anzeige: Block;
  Farbe: #6f6f6f;
  Hintergrund: #EEE;
  -moz-box-shadow: 0 1px 0 weißer Einschub, 0 -1px 0 #d5d5d5 Einschub;
  -webkit-box-shadow: 0 1px 0 weißer Einschub, 0 -1px 0 #d5d5d5 Einschub;
  Box-Shadow: 0 1px 0 weißer Einschub, 0 -1px 0 #d5d5d5 Einschub;
  Textschatten: 0 -1px 0 rgba(255, 255, 255, 0,3);
  Polsterung: 10px 10px;
}
.dropdown .dropdown-menu li a:hover {
  Hintergrund: #f6f6f6;
}
.dropdown .anzeigen, .dropdown .ausblenden {
  -moz-transform-origin: 50 % 0 %;
  -ms-transform-origin: 50 % 0 %;
  -webkit-transform-origin: 50 % 0 %;
  Transform-Ursprung: 50 % 0 %;
}
.dropdown .anzeigen {
  Anzeige: Block;
  maximale Höhe: 9999px;
  -moz-transform: SkalaY(1);
  -ms-transform: SkalaY(1);
  -webkit-transform: MaßstabY(1);
  transformieren: scaleY(1);
  Animation: Animation anzeigen, 0,5 s, Ein- und Ausblenden;
  -moz-animation: ShowAnimation 0,5 s, Easy-In-Out;
  -webkit-animation: showAnimation 0,5 s, Ein- und Ausschalten;
  -moz-transition: max. Höhe 1 s, leichtes Ein- und Aussteigen;
  -o-Übergang: max. Höhe 1 s, leichtes Ein- und Aussteigen;
  -webkit-transition: max. Höhe 1 Sek., Ein-/Ausstieg erleichtert;
  Übergang: max. Höhe 1 s, leichtes Ein- und Aussteigen;
}
.dropdown .ausblenden {
  maximale Höhe: 0;
  -moz-transform: SkalaY(0);
  -ms-transform: SkalaY(0);
  -webkit-transform: MaßstabY(0);
  transformieren: scaleY(0);
  Animation: HideAnimation 0,4 s Ausblendung;
  -moz-animation: hideAnimation 0,4 s Ausstieg;
  -webkit-animation: hideAnimation 0,4 s Ausstieg;
  -moz-transition: maximale Höhe, 0,6 s Ausstieg;
  -o-Übergang: maximale Höhe, 0,6 s, Ausstieg;
  -webkit-transition: maximale Höhe, 0,6 s Auslaufzeit;
  Übergang: max. Höhe 0,6 s, Auslaufen;
}

@keyframes showAnimation {
  0% {
    -moz-transform: MaßstabY(0,1);
    -ms-transform: MaßstabY(0,1);
    -webkit-transform: MaßstabY(0,1);
    transformieren: scaleY(0,1);
  }
  40 % {
    -moz-transform: MaßstabY(1,04);
    -ms-transform: MaßstabY(1,04);
    -webkit-transform: MaßstabY(1,04);
    transformieren: scaleY(1,04);
  }
  60 % {
    -moz-transform: MaßstabY(0,98);
    -ms-transform: MaßstabY(0,98);
    -webkit-transform: MaßstabY(0,98);
    transformieren: scaleY(0,98);
  }
  80 % {
    -moz-transform: MaßstabY(1,04);
    -ms-transform: MaßstabY(1,04);
    -webkit-transform: MaßstabY(1,04);
    transformieren: scaleY(1,04);
  }
  100 % {
    -moz-transform: MaßstabY(0,98);
    -ms-transform: MaßstabY(0,98);
    -webkit-transform: MaßstabY(0,98);
    transformieren: scaleY(0,98);
  }
  80 % {
    -moz-transform: MaßstabY(1,02);
    -ms-transform: MaßstabY(1,02);
    -webkit-transform: MaßstabY(1,02);
    transformieren: scaleY(1,02);
  }
  100 % {
    -moz-transform: SkalaY(1);
    -ms-transform: SkalaY(1);
    -webkit-transform: MaßstabY(1);
    transformieren: scaleY(1);
  }
}
@-moz-keyframes showAnimation {
  0% {
    -moz-transform: MaßstabY(0,1);
    -ms-transform: MaßstabY(0,1);
    -webkit-transform: MaßstabY(0,1);
    transformieren: scaleY(0,1);
  }
  40 % {
    -moz-transform: MaßstabY(1,04);
    -ms-transform: MaßstabY(1,04);
    -webkit-transform: MaßstabY(1,04);
    transformieren: scaleY(1,04);
  }
  60 % {
    -moz-transform: MaßstabY(0,98);
    -ms-transform: MaßstabY(0,98);
    -webkit-transform: MaßstabY(0,98);
    transformieren: scaleY(0,98);
  }
  80 % {
    -moz-transform: MaßstabY(1,04);
    -ms-transform: MaßstabY(1,04);
    -webkit-transform: MaßstabY(1,04);
    transformieren: scaleY(1,04);
  }
  100 % {
    -moz-transform: MaßstabY(0,98);
    -ms-transform: MaßstabY(0,98);
    -webkit-transform: MaßstabY(0,98);
    transformieren: scaleY(0,98);
  }
  80 % {
    -moz-transform: MaßstabY(1,02);
    -ms-transform: MaßstabY(1,02);
    -webkit-transform: MaßstabY(1,02);
    transformieren: scaleY(1,02);
  }
  100 % {
    -moz-transform: SkalaY(1);
    -ms-transform: SkalaY(1);
    -webkit-transform: MaßstabY(1);
    transformieren: scaleY(1);
  }
}
@-webkit-keyframes showAnimation {
  0% {
    -moz-transform: MaßstabY(0,1);
    -ms-transform: MaßstabY(0,1);
    -webkit-transform: MaßstabY(0,1);
    transformieren: scaleY(0,1);
  }
  40 % {
    -moz-transform: MaßstabY(1,04);
    -ms-transform: MaßstabY(1,04);
    -webkit-transform: MaßstabY(1,04);
    transformieren: scaleY(1,04);
  }
  60 % {
    -moz-transform: MaßstabY(0,98);
    -ms-transform: MaßstabY(0,98);
    -webkit-transform: MaßstabY(0,98);
    transformieren: scaleY(0,98);
  }
  80 % {
    -moz-transform: MaßstabY(1,04);
    -ms-transform: MaßstabY(1,04);
    -webkit-transform: MaßstabY(1,04);
    transformieren: scaleY(1,04);
  }
  100 % {
    -moz-transform: MaßstabY(0,98);
    -ms-transform: MaßstabY(0,98);
    -webkit-transform: MaßstabY(0,98);
    transformieren: scaleY(0,98);
  }
  80 % {
    -moz-transform: MaßstabY(1,02);
    -ms-transform: MaßstabY(1,02);
    -webkit-transform: MaßstabY(1,02);
    transformieren: scaleY(1,02);
  }
  100 % {
    -moz-transform: SkalaY(1);
    -ms-transform: SkalaY(1);
    -webkit-transform: MaßstabY(1);
    transformieren: scaleY(1);
  }
}
@keyframes hideAnimation {
  0% {
    -moz-transform: SkalaY(1);
    -ms-transform: SkalaY(1);
    -webkit-transform: MaßstabY(1);
    transformieren: scaleY(1);
  }
  60 % {
    -moz-transform: MaßstabY(0,98);
    -ms-transform: MaßstabY(0,98);
    -webkit-transform: MaßstabY(0,98);
    transformieren: scaleY(0,98);
  }
  80 % {
    -moz-transform: MaßstabY(1,02);
    -ms-transform: MaßstabY(1,02);
    -webkit-transform: MaßstabY(1,02);
    transformieren: scaleY(1,02);
  }
  100 % {
    -moz-transform: SkalaY(0);
    -ms-transform: SkalaY(0);
    -webkit-transform: MaßstabY(0);
    transformieren: scaleY(0);
  }
}
@-moz-keyframes hideAnimation {
  0% {
    -moz-transform: SkalaY(1);
    -ms-transform: SkalaY(1);
    -webkit-transform: MaßstabY(1);
    transformieren: scaleY(1);
  }
  60 % {
    -moz-transform: MaßstabY(0,98);
    -ms-transform: MaßstabY(0,98);
    -webkit-transform: MaßstabY(0,98);
    transformieren: scaleY(0,98);
  }
  80 % {
    -moz-transform: MaßstabY(1,02);
    -ms-transform: MaßstabY(1,02);
    -webkit-transform: MaßstabY(1,02);
    transformieren: scaleY(1,02);
  }
  100 % {
    -moz-transform: SkalaY(0);
    -ms-transform: SkalaY(0);
    -webkit-transform: MaßstabY(0);
    transformieren: scaleY(0);
  }
}
@-webkit-keyframes hideAnimation {
  0% {
    -moz-transform: SkalaY(1);
    -ms-transform: SkalaY(1);
    -webkit-transform: MaßstabY(1);
    transformieren: scaleY(1);
  }
  60 % {
    -moz-transform: MaßstabY(0,98);
    -ms-transform: MaßstabY(0,98);
    -webkit-transform: MaßstabY(0,98);
    transformieren: scaleY(0,98);
  }
  80 % {
    -moz-transform: MaßstabY(1,02);
    -ms-transform: MaßstabY(1,02);
    -webkit-transform: MaßstabY(1,02);
    transformieren: scaleY(1,02);
  }
  100 % {
    -moz-transform: SkalaY(0);
    -ms-transform: SkalaY(0);
    -webkit-transform: MaßstabY(0);
    transformieren: scaleY(0);
  }
}

// Dropdown-Menü
var dropdown = document.querySelectorAll('.dropdown');
var dropdownArray = Array.prototype.slice.call(dropdown,0);
dropdownArray.forEach(Funktion(el){
	var button = el.querySelector('a[data-toggle="dropdown"]'),
			Menü = el.querySelector('.dropdown-menu'),
			Pfeil = Schaltfläche.Abfrageselektor('i.icon-arrow');

	button.onclick = Funktion(Ereignis) {
		wenn(!menu.hasClass('anzeigen')) {
			menu.classList.add('anzeigen');
			menu.classList.remove('ausblenden');
			arrow.classList.add('öffnen');
			arrow.classList.remove('schließen');
			event.preventDefault();
		}
		anders {
			menu.classList.remove('anzeigen');
			menu.classList.add('ausblenden');
			arrow.classList.remove('öffnen');
			Pfeil.classList.add('schließen');
			event.preventDefault();
		}
	};
})

Element.prototype.hasClass = Funktion(Klassenname) {
    returniere dies.className && neuer RegExp("(^|\\s)" + className + "(\\s|$)").test(dieses.className);
};