warum klappt die nicht nach unten auf? was ist falsch? danke im voraus
HTML
<!DOCTYPE html>
<html>
<head>
<title>Startseite | Homepage von Philipp Schuster</title>
<meta charset="UTF-8">
<style type="text/css">
header, nav, section, footer {
display: block;
}
.rTL { border-top-left-radius: 8px; -moz-border-radius-topleft: 8px; -webkit-border-top-left-radius: 8px}
.rTR { border-top-right-radius: 8px; -moz-border-radius-topright: 8px; -webkit-border-top-right-radius: 8px}
.rBL { border-bottom-left-radius: 8px; -moz-border-radius-bottomleft: 8px; -webkit-border-bottom-left-radius: 8px}
.rBR {border-bottom-right-radius: 8px; -moz-border-radius-bottomright: 8px; -webkit-border-bottom-right-radius: 8px}
body {
text-align:center;
background-color: #c3e980;
}
#rahmen {
border-top-width: thin;
border-left-width: thin;
border-right-width: medium;
border-bottom-width: medium;
border-style: solid;
margin: 0 auto;
min-width: 820px;
max-width: 900px;
text-align:left;
font-size: 18px;
background-color: #bdf951;
}
#seitenbereich {
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}
header {
background-color:#8ac322;
padding-left:20px;
line-height: 35px;
text-decoration: underline;
}
nav {
margin-top:60px;
background-color: #000000;
}
nav li {
display: inline-block;
margin-left: 10px;
text-align:center;
list-style: none;
}
nav a {
float: left;
line-height: 40px;
font-size: 20px;
padding-right: 20px;
padding-left: 20px;
color: #98ed00;
background-color: #000000;
}
nav a:hover {
color: #000000;
background-color: #ffffff;
}
#navi ul {
display:none;
}
#navi li:hover ul {
clear:left;
display:block;
}
</style>
</head>
<body><div id="rahmen" class="boxStyle rTL rTR rBL rBR"><div id="seitenbereich">
<script>
document.createElement("header");
document.createElement("nav");
document.createElement("section");
document.createElement("footer");
</script>
<header class="boxStyle rTL rTR">Startseite | Homepage von Philipp Schuster
</header>
<nav class="boxStyle rTL rTR rBL rBR">
<ul id="navi">
<li><a href="#">Link 1</a>
<ul><li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul></li>
<li><a href="#">Noch ein Link</a></li>
<li><a href="#">Noch ein Link</a></li>
<li><a href="#">Und noch ein Link</a></li>
</ul>
</nav>
</div></div></body>
</html>