Hallo zusammen, bin mit meinem Latein am Ende, kann mir jemand helfen? Mein Problem:
Ich versuchte ein Menu mit kaskadierenden Submenus zu schreiben. Da das Teil auch ohne JS funktionieren soll, müssen die Menupunkte an einer bestimmten Position in der Datei eingebunden werden. Allerdings verschwindet die Box für das Submenu hinter anderen <div> Elementen die später in der Datei auftauchen, Operationen mit z-index führen zu keinerlei Ergebniss. DAS PASSIERT NUR IM IE!
Habe unter http://www.bitdump.de eine Beispieldatei abgelegt.
Es wäre wirklich klasse wenn jemandem dazu etwas einfällt. Dankeschön Daniel
Hier kommt der Sourcecode:
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <style type="text/css"> <!-- .secondmenuactive{ position:relative; left:0px; height:18px; width:135px; border-style:solid; border-width:2px; font:bold 10px Verdana; color:#ffffff; padding-left:10px; padding-top:2px; } .secondmenubeneath { position:relative; z-index:2; left:0px; height:18px; width:135px; background-color:#e8e8de; border-bottom:solid 2px #b5b0a5; border-left:solid 2px #ffffff; border-right:solid 2px #b5b0a5; font:normal 10px Verdana; color:#000000; padding-left:10px; padding-top:2px; }
.thirdmenubox {position:absolute; z-index:3; border-width:1px; border-style:solid; border-color:#000000; display:normal; top:5px; left:125px; width:200px; }
.thirdmenuitem { background-color:#e8e8de; border-bottom: solid 1px #000000; height:14px; width:200px; }
.secondmenuspacer { position:relative; left:0px; width:135px; height:1px; padding:0px; marghin:0px; border-top:solid 1px #041b29; overflow:hidden; }
#content { position:absolute; left:160px; top:90px; background-color:green; border-left: solid 2px #b5b0a5; border-top: solid 2px #b5b0a5; border-right: solid 2px #ffffff; border-bottom: solid 2px #ffffff; width:767px; min-height:210px; z-index:2; }
--> </style>
<!--[if gte IE 5]> <style type="text/css"> #content {height:210px;} </style> <![endif]--> </head> <body>
<div id="secondmenu"> <div id="innersecondmenu"> <div id="m2007a" class="secondmenuactive"> <!--above,active,beneath--> <a href="/scripts/mgrqispi.dll?APPNAME=NEWMEDIA&PRGNAME=E_MEMBER_PAGE&ARGUMENTS=-N317984102620004,-N2700" class="secondmenu" style="color:white;font-weight:bold;">Member Page</a> </div> <div class="secondmenuspacer"></div>
<div id="m0a" class="secondmenubeneath"> <!--above,active,beneath--> <a href="/scripts/mgrqispi.dll?APPNAME=NEWMEDIA&PRGNAME=E_INBOX&ARGUMENTS=-N317984102620004,-N2701" class="secondmenu">Postkorb</a> </div> <div class="secondmenuspacer"></div>
<div id="m0a" class="secondmenubeneath"> <!--above,active,beneath--> <a href="" class="secondmenu">Meine Kontakte</a> </div> <div class="secondmenuspacer"></div>
<div id="m0a" class="secondmenubeneath"> <!--above,active,beneath--> <a href="" class="secondmenu">Kontake knüpfen</a> <div id="thirdmenubox1" class="thirdmenubox"> <div id="thirdmenuitem0|0" class="thirdmenuitem"> <a href="" class="thirdmenu">Kontake finden</a> </div> <div id="thirdmenuitem0|1" class="thirdmenuitem"> <a href="" class="thirdmenu">Vermittelte Kontake</a> </div> <div id="thirdmenuitem0|2" class="thirdmenuitem"> <a href="" class="thirdmenu">Zu vermittelnde Kontake</a> </div> <div id="thirdmenuitem0|3" class="thirdmenuitem"> <a href="" class="thirdmenu">Kontaktwunschliste</a> </div>
</div> </div> <div class="secondmenuspacer"></div>
<div id="m0a" class="secondmenubeneath"> <!--above,active,beneath--> <a href="" class="secondmenu">Events</a> </div> <div class="secondmenuspacer"></div>
<div id="m0a" class="secondmenubeneath"> <!--above,active,beneath--> <a href="" class="secondmenu">Arbeitskreise</a> </div> <div class="secondmenuspacer"></div>
</div> </div>