CSS-Problem bei verschiedenen Browsern (Subnavi mit Mouseover)

Hallo,

ich habe ein "kleines" Problem bei einer eigentlich fertigen Webseite, auf die ich eigentlich stolz bin, da es erst mein 2. Contao-Projekt ist und einige Dinge implementiert werden mussten.

URL: http://www.adletics.de

Dort findet man eine Hauptnavigation (blauer Hintergrund) mit einer Subnavigation, wenn ein Menüpunkt angeklickt wird. Ziel war es, dass die Subnavi direkt an die Hauptnavi andockt (was ja auch funktioniert). Nachdem alles soweit stand, hieß es, dass der Besucher der Startseite (und den Seiten, die über das Menü in der Fußzeile erreichbar sind) per Mouseover über die Hauptmenüpunkte die Untermenüpunkte sieht. Ist der Besucher auf den anderen Seiten, gibt es keinen Mouseover-Effekt.

Daher hatte ich überlegt, ein eigenes Navigations-Modul dafür zu machen, eine CSS-ID dafür zu vergeben (topmenue-start) und dieses Modul dann auf den jeweiligen Seiten einzubinden.

Klappt soweit ganz gut, nur leider hat die Subnavigation in den verschiedenen Browsern einen unterschiedlichen Abstand zum Hauptmenü.

So wie es sein soll wird es im IE, im Safari und Chrome angezeigt. Opera hat einen weißen Blitzer dazwischen, während im FF das Hauptmenü vom Untermenü leicht überlagert wird.

Alle "Tricks" mit 1px hoch und runter schieben haben nichts gebracht.

Hat jemand einen Tipp für mich?

Das CSS vom "Mouseover-Menü":

HTML-Code:

---

#header #topmenue-start
{
        width:895px;
        margin-left:140px;
        background-color:#003366;
        border:1px solid #003366;
        font-family:Calibri,"Trebuchet MS",Arial,Verdana,sans-serif;
        font-size:1.1em;
        border-radius: 4px 4px 4px 4px;
}

#header #topmenue-start .level_2
{
        margin-top:-1px;
        font-family:Arial,Verdana,sans-serif;
}

#header #topmenue-start ul
{
        margin:0;
        padding-left:0;
}

#header #topmenue-start li
{
        display:inline;
        padding-right:0.7em;
        padding-left:0.5em;
        list-style: none outside none;
}

#header #topmenue-start a,
#header #topmenue-start a:link,
#header #topmenue-start a:visited
{
        padding-left:1.2em;
        text-decoration:none;
        color:#FFFFFF;
}

#header #topmenue-start a:hover,
#header #topmenue-start a:active,
#header #topmenue-start a:focus,
#header #topmenue-start a.trail
{
        padding-left:1.2em;
        text-decoration:none;
        color:#99CC00;
}

#header #topmenue-start a.active,
#header #topmenue-start li.active
{
        padding-left:1.7em;
        text-decoration:none;
        color:#99CC00;
}

#header #topmenue-start li ul
{
        display:none;
}

#header #topmenue-start li:hover ul
{
        top:127px;
        position:absolute;
        display:block;
}

#header #topmenue-start li:hover ul li
{
        margin-right:0;
        margin-left:-10px;
        font-size:0.8em;
        list-style: none outside none;
}

#header #topmenue-start li:hover ul li a
{
        padding-right:0.5em;
        padding-left:0.5em;
        font-weight:bold;
        color:#99CC00;
}

#header #topmenue-start li ul li a:hover,
#header #topmenue-start li ul li a:focus,
#header #topmenue-start li ul li a:active
{
        padding-right:0.5em;
        padding-left:0.5em;
        background-color:#99CC00;
        color:#FFFFFF;
}

#header #topmenue-start li.sportevents li.first
{
        margin-left:93px;
}

#header #topmenue-start li.cons li.first
{
        margin-left:246px;
}

#header #topmenue-start li.promo li.first
{
        margin-left:368px;
}

#header #topmenue-start li.eventwerbung li.first
{
        margin-left:491px;
}

---

Wäre sehr dankbar für eine Lösung :)

Viele Grüße
Ray