Firefox kennt position:absolute nicht

html.de-Forum HTML, XHTML & CSS
1

Hallo zusammen,

ich bin gerade dabei ein kleines CSS-Menü mit Haupt-Navigation und zwei Unterebenen zu bauen.
Im Chrome (v32.0) und Safari (v7.0.1) funktioniert das Menü einwandfrei. Firefox 27 scheint jedoch die Kombination von „position:relative“ und „position:absolute“ nicht zu verstehen, obgleich ich schon andere CSS-Menüs mit identischen Aufbau sah, die einwandfrei funktionierten.

In meinem Beispiel jedoch, ordnet FF den Unterpunkt „Autos“ nicht unter „Produkte“ an, sondern positioniert den Menüpunkt ganz nach links.

Beispiel siehe: http://url9.de/QTn

Ich finde beim besten Willen keinen Fehler. Vielleicht kennt jmd. eine Lösung für mein Problem:

[CODE]

Test

#navi ul {
margin: 0;
padding: 0;}

#navi ul ul, #navi ul ul ul {
display: none;}

#navi ul li {
display: inline;
position: relative;}

#navi ul li:hover > ul {
position: absolute;
display: block;}

#navi ul ul li:hover ul {
left: 100%;
top: 0;}

[/CODE]

Danke & Grüße,
Fritz

2

Firefox 27 scheint jedoch die Kombination von „position:relative“ und „position:absolute“ nicht zu verstehen, obgleich ich schon andere CSS-Menüs mit identischen Aufbau sah, die einwandfrei funktionierten.

Firefox macht das schon richtig, aber du hast nicht verstanden, wie man so ein Menü aufbaut. Um die Listenelemente nebeneinander anzuordnen, werden diese entweder gefloatet oder erhalten ein display: inline-block. Das Attribut position hat da nichts verloren, weder mit relative noch absolute.

Für eine horizontale CSS-Navigation gibt es tausende von Tutorials im Netz.

3

Hallo Trojaner,

mag sein, dass mir das Thema „Menüs“ noch fremd ist, aber ich habe das Menü anhand eines Tutorials aufgebaut.
Das „display: inline-block“ war der ausschlaggebende Hinweis > funzt!

Danke & Gruß
Fritz