[thiagojonas]

Hallo Freunde,

ich habe ein Dropdown menu entwickelt. Dieses befindet sich innerhalb eines Containers mit einer festen Breite von 800px;

Das Menu besteht aus drei Ebenen. Ebene 1 ist nur angezeigt.
Ebene zwei und Ebene drei werden bei :hover über Ebene 1 angezeigt. Wobei Ebene 2 mehr als Überschrift für die Items von Ebene 3 dienen.

Dabei möchte ich, dass der Hintergrund den Container, also 900px ausfüllt. und zwar immer so, dass egal beim welchem :hover der Ebene 1, der Hintergrund innerhalb des Container ganz links ist.

Wie folgt habe ich das gelöst:

//Hintergrund des Menus bei .hover

ul#mainNav li div.subnav {
	display: none;
	position: absolute;
	top: 32px; /** Set 1px less than menu height */
	left: 0px;
	padding: 0 0 10px 0px;
	width: 900px;
	background:#98b5fb;
	filter:alpha(opacity=93); /* IE */
	-moz-opacity: 0.93; /* Mozilla */
	opacity: 0.93; /* Opera */
        border-top:#fff 1px solid;
}

ul#mainNav li:nth-child(2) div.subnav { left: -96px;}
ul#mainNav li:nth-child(3) div.subnav { left: -213px;}
ul#mainNav li:nth-child(4) div.subnav { left: -443px;}

Child(1) befindet sich bereits ganz oben links.

Bei meiner Auflösung 12800 x 800 ist die Positionierung perfekt. Wenn ich jetzt aber eine andere Auflösung habe, verschiebt sich der Hintergrund je nach Menuitem in der ersten Ebene etwas nach links oder nach rechts.

Dadurch wirk das ganze unsauber.

Wie kann ich das lösen?

Ich habe mir überlegt, dass man mit JavaScript die Auflösung abfragt und dass entsprechende CSS lädt, aber man kann doch nicht alle Birdschirmauflösungen der Welt auflisten.

Da gibt es doch bestimmt eine einfachere Lösung oder?

Vielen Dank im voraus

[cebito]

Zitat von thiagojonas

Bei meiner Auflösung 12800 x 800

Neuer "Wiiiiiidesreen"?

BtT - stell mal nen Testcase online, dein CSS-Schnipsel nutzt nicht sehr viel.