/*   body { background-color: #D40000; } */ /* Hintergrundfarbe nur zur Demo */

       nav ul {                             /* UL-Listen: Standardaussehen der Liste entfernen */
         list-style: none;                  /* - Aufzählungspunkte */
         margin: 0;                         /* - Aussenabstand */
         padding: 0;                        /* - Innenabstand */
         text-align: right;                 /* - rechtsbuendig (nur bei Menü oben rechts!) */
         font-family: Arial, Helvetica;     /* - Schriftart */
         font-weight: bold;                 /* - Schrift fett */
       }
  /* - Menüpunkte nebeneinander anordnen */
       nav > ul > li {                      /* LI-Elemente - ">" verhindert Vererbung auf tiefer verschachtelte LI-Elemente */
         float: right;                       /* - anordnen: none=untereinander, left/right=nebeneinander
                                                  auch bei left/right wird untereinander ausgegeben, wenn
                                                  wegen der Breite der li-Elemente nur eines in das IFRAME hineinpasst */
       }
  /* - Da zunächst nur die erste Navigationsebene sichtbar sein soll, müssen alle anderen Ebenen ausgeblendet werden. */
       nav > ul > li > ul {                 /* UL-Listen ab der 2. Ebene */
         display: none;                     /* - zunächst ausblenden */
       }
  /* - Das Aussehen der einzelnen Menüpunkte definieren: Links auszeichnen */
       nav > ul a {                         /* Links der 1. Ebene */
         display: block;                    /* - Blockelement ermöglicht Innenabstand (Inline-Element nicht) */
         text-decoration: none;             /* - Unterstreichung unterdruecken */
         white-space: nowrap;               /* - automatischen Zeilenumbruch verhindern */
         padding: 10px;                     /* - Innenabstand */
         background: rgb(216, 212, 208);    /* - Blockelement hat eigene Hintergrundfarbe */
         color: rgb(0, 0, 0);
         width: 140;                        /* - Breite: sollte sich nach dem Inhalt richten und mindestens so breit sein,
                                                 dass nicht mehrere nebeneinander in das IFRAME passen. */
        }
       nav ul > li:hover a {                /* - Links der 1. Ebene bei Maus darüber */
         background: rgb(232, 228, 224);
       }

       nav ul > li > ul > li a {            /* - Links ab der 2. Ebene */
         font-size: 11pt;
         padding-top: 11px;                  /* - Innenabstand */
         background: rgb(232, 228, 224);
         color: rgb(0, 0, 0);
       }
       nav ul > li > ul > li:hover a {      /* - Links ab der 2. Ebene bei Maus darüber */
         background: rgb(248, 244, 240);
       }

       nav ul > li > ul > li > ul > li a {  /* - Links ab der 3. Ebene */
         font-size: 10pt;
         padding-top: 3px;                  /* - Innenabstand oben */
         padding-bottom: 5px;               /* - Innenabstand unten */
         background: rgb(248, 244, 240);
         color: rgb(0, 0, 0);
       }

  /* - Menü selbst formatieren: zusätzliche Eigenschaften */
       nav > ul {                           /* UL-Liste der 1. Ebene */
         float: left;                       /* damit die Breite nicht 100 Prozent ist,
                                               sondern sich der Breite der nebeneinander
                                               angeordneten Kindelemente anpasst. */
         overflow: hidden;                  /* damit abgerundete Ecken nicht überdeckt werden
                                               durch Kindelemente ohne angerundeten Ecken */
         padding: 0 10px 0 10px;
         /* box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25); */ /* Schatten nur zur Demo */
       }

  /* - Zugriff auf die zweite Ebene ermöglichen */
       nav > ul > li:hover > ul {           /* UL-Liste der 2. Ebene bei Maus über LI-Element der 1. Ebene */
         display: block;                    /* - einblenden */
         position: absolute;
         right: 100%;
         top: -38;                          /* 2. Ebene nach oben ziehen neben den Menüpunkt der 1. Ebene */
         height: 0;                         /* es wird keine Hoehe von der 1. Ebene gestohlen */

       }
  /*   nav > ul > li > ul > li {     */      /* LI-Elemente der 2. Ebene */
       nav > ul > li > ul li {             /* LI-Elemente der 2. Ebene */
         position: relative;
       }
  /*   Während mit DISPLAY die zweite Ebene eines Menüpunkte angezeigt wird, sorgt POSITION dafür,
       dass das verschachtelte UL-Element nicht die Breite des übergeordneteten LI-Elementes beeinflusst. 
       Die LI-Elemente der zweiten Ebene werden wiederum relativ dargestellt. */

  /* - Dritte Menüebene: */
       nav > ul > li > ul > li > ul {          /* UL-Liste der 3. Ebene: */
         display: none;                        /* - zunächst ausblenden */
       }
       nav > ul > li > ul > li:hover > ul {    /* UL-Liste der 3. Ebene bei Maus über LI-Element der 2. Ebene: */
         display: block;                       /* - einblenden */
         position: absolute;
         left: 100%;                           /* 3. Liste neben der 2. Liste anordnen */
         top: 0;                               /* und zwar auf der Höhe des übergeordneten LI-Elementes */
         background: rgb(244, 244, 111);  /* Hintergrundfarbe nur zur Demo */
       }
  
  /* Abweichende Formatierung fuer mobile Endgeraete mit Fensterbreite bis 600 Pixel mittels Media Queries: */
     @media only screen and (max-width: 600px) {
  /*   alle Elemente untereinander darstellen. Dazu sind alle absoluten Positionierungen sowie die Floats zu entfernen: */
       nav > ul,
       #nav > ul > li {
         float: none;
       }
       nav > ul > li > ul,
       nav > ul > li:hover > ul {
         position: relative;                   /* absolute Positionierungen entfernen */
       }
       nav > ul > li > ul > li:hover > ul {    /* UL-Liste der 3. Ebene bei Maus über LI-Element der 2. Ebene: */
         position: relative;                   /* absolute Positionierung entfernen */
         left: 0;                              /* die LEFT-Eigenschaft muss auf Null gesetzt werden. */
       }
       nav > ul > li > ul > li > ul > li > a { /* Links ab der 3. Ebene */
       /*  font-style: italic;  */             /* - kursiv - zur Unterscheidung */
       }
     }

  /* Abweichende Formatierung fuer mobile Endgeraete mit Fensterbreite bis 420 Pixel mittels Media Queries: */
     @media only screen and (max-width: 420px) {
  /*   Menüpunkte der ersten Ebene erst per „:hover“-Pseudoklasse erscheinen lassen. */
       nav > ul > li {                         /* LI-Elemente der 1. Ebene */
         display: none;                        /* - zunächst ausblenden */
       }
       nav > ul:hover li {                     /* LI-Elemente der 1. Ebene bei Maus über UL-Liste der 1. Ebene:*/
         display: block;                       /* - einblenden */
       }                                       /* Da diese UL-Liste keine sichtbaren LI-Elemente hat: */
       nav > ul::before {                      /* - zusätzliches immer sichtbares Pseudo-Element erzeugen */
         display: block;                       /* - einblenden (sichtbar machen) */
         content: url(ico-menu.png);           /* - einen "Text" oder ein Icon url(ico.png) zuweisen */
         padding: 10px;
       }
     }

  /* Auf Smartphones, die per Gesten gesteuert werden, wird der Hovereffekt per Fingertap ausgelöst.
     Problematisch ist hierbei, dass bei einem Tap auf einen Link dieser zeitgleich mit dem Hovereffekt aufgerufen wird.
     Daher sollte man Menüpunkte, die ein Untermenü aufrufen, selbst nie mit einem Link versehen.
     Sonst sind untergeordnete Menüpunkte per Tap nicht erreichbar. */
  /* Entweder setzt man einen seiteninternen Link (also „#“)
     oder verzichtet ganz auf die Auszeichnung eines A-Elementes und ersetzt dieses beispielsweise durch ein SPAN-Element. */
  /* Die untergeordneten Menüs werden jeweils unterhalb des übergeordneten Menüpunktes dargestellt. */

 /*  Damit man direkt erkennt, welche Menüpunkte ein verschachteltes Untermenü haben, könnten wir diese mit etwas CSS kennzeichnen.
     Dazu fügen wir jedem A-Element das Pseudoelement „::after“ hinzu, um ein Plus-Zeichen oder drei Punkte zu ergänzen. */
     nav li > a:after {
       content: " ...";
     }

  /* Anschließend entfernen wir das Plus-Zeichen oder die drei Punkte per Pseudoklasse „:only-child“ von solchen A-Elementen wieder,
     welche das einzige Kindelement sind, also kein UL-Element als Kind besitzen. */
     nav li > a:only-child:after {
       content: "";
     }