Reines CSS-Dropdown-Menü

<div id="Behälter">
    <Navigation>
        <ul>
            <li><a href="#">Startseite</a></li>
            <li><a href="#">WordPress</a>
            <!-- Dropdown-Liste der ersten Ebene -->
            <ul>
                <li><a href="#">Themen</a></li>
                <li><a href="#">Plugins</a></li>
                <li><a href="#">Anleitungen</a></li>
            </ul>        
            </li>
            <li><a href="#">Webdesign</a>
            <!-- Dropdown-Liste der ersten Ebene -->
            <ul>
                <li><a href="#">Ressourcen</a></li>
                <li><a href="#">Links</a></li>
                <li><a href="#">Anleitungen</a>
            	<!-- Dropdown-Liste der zweiten Ebene -->
                <ul>
                    <li><a href="#">HTML/CSS</a></li>
                    <li><a href="#">jQuery</a></li>
                    <li><a href="#">Andere</a>
                        <!-- Dropdown-Liste der dritten Ebene -->
                        <ul>
                            <li><a href="#">Zeug</a></li>
                            <li><a href="#">Dinge</a></li>
                            <li><a href="#">Anderes Zeug</a></li>
                        </ul>
                    </li>
                </ul>
                </li>
            </ul>
            </li>
            <li><a href="#">Grafikdesign</a></li>
            <li><a href="#">Inspiration</a></li>
            <li><a href="#">Kontakt</a></li>
            <li><a href="#">Über</a></li>
        </ul>
    </nav>
  <h1>Reines CSS-Dropdown-Menü</h1>
<p> Ein einfaches Dropdown-Navigationsmenü, das nur mit CSS erstellt wurde. Dropdowns sind mit einem Pluszeichen ( + ) gekennzeichnet.</p>
</div>

/* CSS-Dokument */

@import-URL (https://fonts.googleapis.com/css?family=Open+Sans);
@import-URL (https://fonts.googleapis.com/css?family=Bree+Serif);

Körper {
	Hintergrund: #212121;
	Schriftgröße: 22px;
	Zeilenhöhe: 32px;
	Farbe: #ffffff;
	Zeilenumbruch: Wortumbruch !wichtig;
	Schriftfamilie: „Open Sans“, serifenlos;
	}

h1 {
	Schriftgröße: 60px;
	Textausrichtung: zentriert;
	Farbe: #FFF;
}	

h3 {
	Schriftgröße: 30px;
	Textausrichtung: zentriert;
	Farbe: #FFF;
}

h3 ein {
	Farbe: #FFF;
}

A {
	Farbe: #FFF;
}

h1 {
	Rand oben: 100px;
	Textausrichtung: zentriert;
	Schriftgröße: 60px;
	Schriftfamilie: „Bree Serif“, „Serif“;
	}

#Behälter {
	Rand: 0 automatisch;
}

P {
	Textausrichtung: zentriert;
}

Navigation {
	Rand: 50px 0;
	Hintergrundfarbe: #E64A19;
}

Navigation ul {
	Polsterung: 0;
  Rand: 0;
	Listenstil: keiner;
	Position: relativ;
	}
	
nav ul li {
	Anzeige: Inline-Block;
	Hintergrundfarbe: #E64A19;
	}

Navigation a
	Anzeige:Block;
	Polsterung: 0 10px;	
	Farbe: #FFF;
	Schriftgröße: 20px;
	Zeilenhöhe: 60px;
	Textdekoration: keine;
}

Navigation a:hover { 
	Hintergrundfarbe: #000000; 
}

/* Dropdowns standardmäßig ausblenden */
Navigation ul ul {
	Anzeige: keine;
	Position: absolut; 
	oben: 60px; /* die Höhe der Hauptnavigation */
}
	
/* Dropdowns beim Hovern anzeigen */
nav ul li:hover > ul {
	Anzeige: erben;
}
	
/* Dropdown-Liste der ersten Ebene */
nav ul ul li {
	Breite: 170px;
	Schwimmer: keine;
	Anzeige: Listenelement;
	Position: relativ;
}

/* Zweite, dritte und weitere Stufen */
nav ul ul ul li {
	Position: relativ;
	oben: -60px; 
	links: 170px;
}

	
/* Ändern Sie dies, um das Dropdown-Symbol zu ändern */
li > a:nach { Inhalt: ' + '; }
li > a:einziges-Kind:nach { Inhalt: ''; }