#head_menu {
  font-size: 12px;
  font-family: 'Open Sans';
  color: #BAB5B5;

  height: 50px;
  display: flex;
  flex-direction: row;
  z-index: 9998;
  position: relative;
  width: 100%;
}

.menu_avatar {
  width: 100px;
  height: 84px;
  background: #0f1524;
  margin-left: 50px;
  margin-top: 5px;
  border: 10px solid rgb(20, 29, 34, 0.8);
  border-radius: 100%;
  z-index: 9999;
}

.rund {
	border-radius: 100%;

}


.menu_buttons {
  margin-left: 20px;
  margin-top: 5px;
  display: flex;  
}

.menu_button {
  padding: 9px;
  font-size: 12px;
  text-transform: uppercase;
  color: #BAB5B5;
}

.menu_icon {
  color: #BAB5B5;
}

nav {
       width: auto; /* Breite der Navigationsleiste; auto, da ich keine Layout habe, in das ich die Leiste einpassen will */
       z-index: 2; /* Sicherheitswert; damit die Navigation über anderen Boxen und Elementen liegt und herunterklappen kann */
    }

/* Überschreiben der Standard-Linkformatierung mit für ein Menü passende Optionen */
nav a:link, nav a:visited {
   text-decoration: none; /* Unterstreichen entfernen */
       color: #BAB5B5; /* Schriftfarbe der Links */
font-family: 'antonio';
font-size: 16px;
       background: rgb(20, 29, 34, 0.8); /* Hintergrundfarbe der Links */
   display: block; /* stellt sicher, dass nicht nur die Schrift, sondern die ganze Zeile von der Hintergrundfarbe erfasst wird */
    }

nav a:hover, nav a:active {
   text-decoration: none; /* Unterstreichen entfernen */;
       color: #BAB5B5; /* Schriftfarbe, die beim Rollover angenommen wird */
       background: rgb(20, 29, 34, 0.8); /* Hintergrundfarbe, die beim Rollover angenommen wird */
font-family: 'antonio';
   display: block; /* stellt sicher, dass nicht nur die Schrift, sondern die ganze Zeile von der Hintergrundfarbe erfasst wird */
    }

nav ul {list-style: none;} /* Listenpunkte entfernen */
nav ul, nav li, nav a {
       margin: 0; /* Abstand der Listenelemente nach außen */
       padding: 0; /* Abstand der Listenelemente nach innen */
    }
nav > ul > li {
       float: left; /* Nebeneinanderstellen der Elemente */
       position: relative; /* Finger weg; stellt sicher, dass die Element nebeneinander gereiht werden und sich nicht überlappen. Sie sind "relative" sprich voneinander abhängig*/
    }

nav > ul > li > a {
       line-height: 45px; /* Gesamt-Zeilenhöhe, der obersten Zeile. Sprich Höhe der Navigationsleiste */
       padding: 0 15px; /* Abstand der Schrift zum Rand des Farbblock. Der erste Wert ist der Abstand nach oben und unten, der zweite nach links und rechts. */
        -webkit-transition: color 1s; -moz-transition: color 1s; -o-transition: color 1s; transition: color 1s; /* Zeitverzögerung bei Farbänderung */
    }

nav > ul > li > ul {
       opacity: 0; visibility: hidden; /* Versteckt das DropDown in der normalansicht */
       background: #614142; /* Hintergrundfarbe des DropDowns */
       text-align: left; /* Text-Ausrichtung im DropDown */
       position: absolute; /* Finger weg; absolute stellt sicher, dass das Dropdown nur von einem Element, nämlich dem direkt übergeordneten, abhängig ist – in diesem Fall ist es das DropDown an die Position des Menüpunkts gebunden  */
        top: 45px; /* Abstand von oben; unterscheidet sich dieser Wert von dem in "nav > ul > li:hover > ul" gibt es einen Einblende-Effekt */
       left: 50%;    margin-left: -70px; /* Finger weg; für die mittige Positionierung unter dem Menüpunkt, margin muss die Hälfte der Breite der DropDown-Box sein */
       width: 140px; /* Breite der DropDown-Box */
      -webkit-transition: all .3s .1s; -moz-transition: all .3s .1s; -o-transition: all .3s .1s; transition: all .3s .1s; /* Zeitverzögerung */
    }
    nav > ul > li:hover > ul {
       opacity: 1; visibility: visible; /* macht das DropDown beim Hovern des Elternelements/Menüpunkts sichtbar */
       top: 45px; /* Abstand von oben, in diesem Fall ist der Wert ident mit der Höhe der Menüzeile. Ist der Wert größer als diese Höhe entsteht ein Abstand zwischen dem DropDown und der obersten Menüzeile, ist er kleiner eine Überblendung  */
    }

    nav ul ul a {
       padding: 5px 8px 7px 15px; /* definiert die Abstände der Schrift im DropDown zum Rand der Box; von links nach rechts stehen die Werte für oben-rechts-unten-links  */
       border-bottom: 2px dashed #0f1524; /* Beispiel, wie das DropDown weiter formatiert werden kann, in diesem Fall trennt es die einzelnen Punkte im DropDown durch eine dicke gepunktete Linie */
    }
    nav ul ul a:hover { background: #0f1524; /* überschreibt den Rollover-Hintergrund der Linkdefinitionen im DropDown */}