Hallo Leute,
habe ein Problem mit dem Umsetzen einer Navigation.
Das ganze soll wie folgt aussehen:
[Blockierte Grafik: http://i42.tinypic.com/2a5yw5c.jpg]
Mein Problem ist, das der kleine grüne Pfeil beim Opera und IE7 nicht mittig ausgerichtet ist sondern weiter oben, der Firefox hingegen stellt es richtig dar.
Beim IE7 ist zusätzlich noch das Problem, wenn eine Unterkategorie aufklappt landet der
Pfeil von der Elternkategorie im aufgeklappten Menü und steht nicht mehr hinter dem Elternelement UND die Listenpunkte fangen ca. 10 Pixel nach rechts eingerückt erst an und nicht am Element Anfang wie im FF und Opera.
Das Aufpopen geschieht über einen Hoover effekt.
Hier mal mein CSS-Code (Die Navi befindet sich im div subnav)
=======
#subnav li{
list-style-image: url(../layout/content/nav_pfeil.jpg);
list-style-position: inside;
border-bottom:1px solid #aeadac;
border-top:1px solid #aeadac;
line-height:23px;
min-height: 23px;
height: auto !important; /* für moderne Browser */
height: 23px; /*für den IE */
}
#subnav li #sNavi1{
}
/* Menü Ebene 2 Standard: Versteckt */
#subnav li #sNavi2{
padding-left: 30px;
display: none;
}
/* Menü Ebene 2 beim drüber fahren Offen */
#subnav li:hover #sNavi2{
font-size: 10px;
font-weight: normal;
display:block;
}
#subnav #sNavi2 li:hover{
background-image: url(../layout/content/navElemHintergrund.jpg);
}
/* Menü Ebene 3 Standard: Versteckt */
#subnav li #sNavi3{
padding-left: 50px;
display: none;
}
/* Menü Ebene 3 beim drüber fahren offen */
#subnav #sNavi2 li:hover #sNavi3{
font-size: 10px;
font-weight: normal;
display:block;
}
#subnav #sNavi3 li:hover{
background-image: url(../layout/content/navElemHintergrund.jpg);
}
=======
Wie kann ich erreichen das meine Navigation in allen 3 Browsern gleich aussieht, für jeden Tipp bin ich dankbar.