CSS3 Dropdown Menü funktioniert nicht richtig

Hallo Leute, Hab seit kurzem mit HTML5 & CSS3 angefangen. Möchte auf meiner Homepage ein verschachteltes Dropdown Menü mit CSS3 erstellen. Hab bei dieser Seite eins gefunden https://wiki.selfhtml.org/wiki/CSS/Tutorials/Dropdown-Men%C3%BCs_mit_CSS_gestalten Nun hab ich das in meine Homepage eingefügt aber es funktioniert nicht richtig. Die anderen Menü punkte nach dem Dropdown Menü werden nach unten verschoben und das Dropdown menü wird auch nicht richtig angezeigt. Könnte mir jemmand bitte sagen was ich da falsch mache?

Kommentar abgeben zu diesen Beitrag/Code ?
Dann hier klicken

Der hier verwendete Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
    <style>
body {
  background: #DCDCDC;
  font-size: 100%;
  margin: 0em;
  padding: 0em;
}
h1 {
  font-size: 2.5em;
  line-height: 3.8em;
  font-family: Helvetica;
  font-weight: 100;
  color: #E2DBDB;
  margin: 0em;
}
h2 {
  font-size: 1.563em;
  line-height: 1.8em;
  font-family: Helvetica;
  font-weight: 100;
  color: #2F2D2C;
  margin: 0em;
  padding: 1.25em;
  text-align: left;
}
p {
  line-height: 1.25em;
  font-family: Helvetica;
  font-weight: 100;
  color: #2F2D2C;
  margin: 0em;
  padding: 0.8em;
  text-align: justify;
}
ul {
  margin: 0px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX