horizontale Menüs mit CSS andocken

[gurbelunder]

Moin Leute,

ich habe aktuell ein CSS Design Problem: Ich habe auf meiner Testdomain mit einer Contao 3.3.2 Instanz eine Website, die ich mit Contao neu aufbauen will, ein horizontales Menü erstellt. Leider werden die Unterpunkte der Menüs nicht direkt angedockt und ich finde gerade ehrlich gesagt nicht den Grund dafür. Könnt ihr mir weiter helfen?

Hier erst mal die Domain: Oldie-Friemler

Und hier mein CSS Code. Erst mal direkt zur Navigation

#header .mod_navigation ul {
    width:1298px;
    float:left;
    margin:283px 0 0;
    padding:0;
    background-color:#af967c;
    border:1px solid #000;
    list-style-type:none;
}

#header .mod_navigation li {
    width:208px;
    float:left;
    margin:0;
    padding-left:50px;
    background-image:url("files/Oldie-Friemler/theme/pictures/favicon.png");
    background-position:left center;
    background-repeat:no-repeat;
}

#header .mod_navigation .level_2 {
    width:0;
    height:0;
    left:-30000px;
    top:-30000px;
    position:absolute;
    overflow:hidden;
    display:inline;
}

#header .mod_navigation li:hover .level_2 {
    width:auto;
    height:auto;
    min-height:80px;
    left:auto;
    top:auto;
    overflow:auto;
    display:block;
}

#header .mod_navigation .level_2 li {
    clear:both;
}

#header .mod_navigation a,
#header .mod_navigation span {
    display:block;
    margin-right:20px;
}

#left ul {
    margin-top:20px;
    padding:0;
}

#left ul .level_2 {
    margin-bottom:20px;
    margin-left:20px;
    padding:0;
}

#left .level_2 li {
    margin-bottom:10px;
    padding:0;
}

#left .mod_navigation a:link,
#left .mod_navigation a:visited,
#header .mod_navigation a:link,
#header .mod_navigation a:visited {
    color:#704214;
    text-decoration:none;
    font-weight:bold;	 
    font-size:1.0em;
}

#left .mod_navigation a:hover,
#left .mod_navigation a:active,
#left .mod_navigation a:focus,
#header .mod_navigation a:hover,
#header .mod_navigation a:active,
#header .mod_navigation a:focus {
    color:#f00;
    text-decoration:none;
    font-weight:bold;	 
    font-size:1.0em;
}

Und hier mal allgemeine Definitionen, vielleicht liegt es auch hieran:

body,
html {
    margin:0;
    padding:0;
    background-color:#af967c;
    background-image:url("files/Oldie-Friemler/theme/pictures/back.png");
    font:1.0em Tahoma;
    color:#704214;
    font-style:normal;
    font-variant:normal;
}

ul,
ol {
    list-style: none outside none;
}

#header {
    min-height:302px;
    background-image:url("files/Oldie-Friemler/theme/pictures/title.jpg");
}

#main {
    min-height:600px;
}

#footer {
    font-size:.8em;
}

ul.level_1,
ul.level_2 {
    text-align:left;
}

.pagination li {
    display:inline;
    padding-right:5px;
    padding-left:5px;
    list-style: none outside none;
}

.pagination {
    margin-right:auto;
    margin-bottom:30px;
    margin-left:auto;
    text-align:center;
}

Die meisten Klassen bzw. ID's werden ja schon von Contao vorgegeben, warum also nicht gleich nutzen . Ich habe auf diesem Beispiel aufgebaut: PSD Tutorials

Wie gesagt, ich bin gerade irgendwie Betriebsblind. Wäre dankbar über jegliche Hilfe!

Gleich mit dabei sei gesagt: Das ist definitiv noch nicht das Endresultat und die Farben an sich wurden mir leider so vorgegeben...

Danke euch und Grüße,
David

[gurbelunder]

OK, hab die Lösung gefunden:

#header .mod_navigation li:hover .level_2 {
    top:20px;
    z-index:1000000;
}