✔ Absolute Element einbetten

[Sprint]

Hallo zusammen,

ich habe hier ein Problem mit diesem vertikalen Fly-out Menü. Es soll so umgebaut werden, daß es dynamisch aus einer Datenbank aufgebaut wird. An sich funktioniert es, das Problem liegt in der absoluten Positionierung. Unter dem Menu soll ein Bild platziert werden und beide Elemente dann in einem farbigen Rahmen. Lasse ich diese absolute Positionierung, schiebt sich das Bild unter das Menü und der Rahmen richtet sich nur nach dem Bild. Ändere ich die Positionierung auf relativ, funktioniert es in jedem Browser außer im IE 7 (8er hab ich noch nicht probiert). Da beschränkt sich die aktive Fläche dann nämlich auf die reine Beschriftung der Button und dadurch hat der User dann keine Chance mehr, ein Untermenü zu erreichen.
Dadurch daß es dynamisch aufgebaut ist, kann ich natürlich weder dem umgebenden Rahmen eine feste Grüße geben noch das Bild absolut positionieren.

Ist es möglich, entweder das Menü so zu ändern, daß es auch "relativ" im IE funktioniert, oder die Umgebung so anzupassen, daß sie sich trotzdem an einem absoluten Menü ausrichtet?

<div id="menu">
	<ul class="level1">
		<li><a class="fly" href="#url"><b>Die Stiftung</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]-->
			<ul>
				<li><a class="fly" href="#url"><b>Wir über uns</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
					<ul>
						<li><a href="index.php?artikel=3"><b>Der Initiator</b></a></li>
					</ul>
					<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
				<li><a href="index.php?artikel=4"><b>Bildung plus</b></a></li>
				<li><a href="index.php?artikel=13"><b>Die Stiftung</b></a></li>
			</ul>
			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
		</li>
		<li><a href="index.php?artikel=5"><b>Berater und Tipps</b></a></li>
		<li><a href="index.php?artikel=6"><b>Gewerbe und Tipps</b></a></li>
		<li><a href="index.php?artikel=7"><b>Gesundheit und Tipps</b></a></li>
		<li><a href="veranstaltungen.php"><b>Tanz und mehr</b></a></li>
		<li><a href="impressum.php"><b>Impressum</b></a></li>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</ul>
	<img style="margin-top: 10px;" src="images/sponsoren.png" alt="" />
</div>

#menu { margin:0 auto; position:relative; }
#menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left; background:url(../images/spacer.gif); padding:10px;}
#menu li {margin:0; padding:0; list-style:none;}
	#menu li {display:inline-block; display:inline;}
	#menu ul {position:relative; left:-9999px;}
	#menu ul.level1 { left:0; }
#menu a { display:block; font:11px/24px Verdana, Arial, sans-serif; color:black; text-decoration:none; padding:0 20px 0 0; background:url(../images/menubgr.gif) no-repeat right top; margin-bottom: 1px; }
#menu a b { display:block; line-height:24px; padding:0 0 0 10px; background:url(../images/menubgl.gif) no-repeat left top; font-weight:normal; }
#menu ul li:hover > ul {visibility:visible; left:100%; margin-left:-10px; margin-top:-35px;}
#menu a:hover ul,
#menu a:hover a:hover ul, 
#menu a:hover a:hover a:hover ul {left:100%; visibility:visible;}
#menu a:hover ul ul, 
#menu a:hover a:hover ul ul {left:-9999px;}
#menu li a.fly {background: url(../images/menubgr2.gif) no-repeat right top;}
#menu li a:hover {background-position:right bottom; color:#006ca7; white-space:nowrap;} 
#menu li a:hover b {background-position:left bottom;} 
#menu li:hover > a {background-position:right bottom; color:#006ca7;}
#menu li:hover > a > b {background-position:left bottom;}
#menu a:hover ul li a b,
#menu a:hover ul a:hover ul li a b,
#menu a:hover ul a:hover ul a:hover ul li a b {background:url(../images/menubgl.gif) no-repeat left top;}
#menu a:hover ul li a:hover b,
#menu a:hover ul a:hover ul li a:hover b,
#menu a:hover ul a:hover ul a:hover ul li a:hover b {background-position:left bottom;}
#menu table {position:absolute; left:99%; height:0; width:0; border-collapse:collapse; margin-top:-46px; margin-left:-10px;}

 

[SpiceLab]

Meines Erachtens kann die absolute Positionierung der Untermenüebenen erhalten bleiben.

Anstelle dieser beiden Zeilen im Original-CSS:

#menu ul {position:absolute; left:-9999px;}
#menu ul.level1 {position:absolute; left:0; top:60px;}

lauten sie so, damit darin die Hauptmenüebene (= .level1) von dieser Regelung unberührt bleibt:

#menu ul ul {position:absolute left:-9999px;}
#menu ul.level1 { /* derzeit keine Formatierung */ }

Auf diese Weise wird das Bild im Textfluß automatisch unterhalb des Menüs ausgerichtet.

 

[Sprint]

Genau das war es. Ich hatte schon befürchtet, die IE 7 User hätten einfach nur Pech gehabt.

Vielen Dank für die Hilfe.