So. Ich hab das ganze jetzt nochmal überarbeitet:
HTML:
<div id="head">
<img id="logo" src="logo.png">
<div id="navi">
<ul id="oben">
<li class="inactive"><a href="#">Ueber1</a></li>
<li class="inactive"><a href="#">Ueber2</a></li>
<li class="inactive"><a href="#">Ueber3</a></li>
<li class="active"><a>Ueber4</a></li>
<li class="inactive"><a href="#">Ueber5</a></li>
</ul>
<ul id="unten">
<li class="inactive"><a href="#">Unterueber1</a></li>
<li class="active"><a>Unterueber2</a></li>
</ul>
</div>
</div>
<div id="content">
<h1>Unterueber2</h1>
Text
</div>
CSS:
/* Anordnung Navigation */
#head {position: absolute; top:0px; left:0px; right:0px; background-color: #1782f9;}
#logo {width: 150px; height: 36px; vertical-align: middle;}
#oben {font-size: 14pt; margin-left: 0px; padding-left: 0px; margin-bottom: 0px; border-bottom: solid 2px #fff;}
#oben li {background-color: #0368d9; list-style: none; padding: 0px; padding-left: 5px;}
#unten {font-size: 14pt; margin-left: 0px; padding-left: 0px; margin-top: 0px;}
#unten li {color: #fff; background-color: #0368d9; list-style: none; padding: 0px; padding-left: 5px;}
/* weiteres design navi */
#oben li a {text-decoration: none;}
#oben li.inactive {vertical-align: middle; color: #fff;}
#oben li.active {vertical-align: middle; color: #0368d9; background-color: #fff;}
#oben li.active a {color: #0368d9;}
#oben li.inactive a {color: #fff;}
#unten li a {text-decoration: none;}
#unten li.inactive {vertical-align: middle; color: #fff;}
#unten li.active {vertical-align: middle; color: #0368d9; background-color: #fff;}
#unten li.active a {color: #0368d9;}
#unten li.inactive a {color: #fff;}
/* Content */
#head {display: inline;}
#content {background-color: #fff; color: #0368d9; margin-top: 5px; display: inline;}
#content a {color: #0368d9; text-decoration: underline;}
Das Problem mit dem Überlappen ist aber immer noch. Und es hat sich auch nichts daran geändert, dass wenn ich
position: absolute; top:0px; left:0px; right:0px;
entferne die Hintergrundfarbe nicht mehr da ist.