Frage stellen
ich habe von jemand anderem die fertigstellung der homepage übernommen, im IE7 gab es aber noch verschiedene probleme. Eines ist mir geblieben und zwar die 'klappnavigation'.
firefox, safari, opera klappen das submenü bei hover aus und alles punktioniert problemlos.
Es ist so, wenn ich den Inhaltscontainer all-menue weglösche und nur die navigation stehenbleibt funktioniert es auch im IE7 (dass es im IE6 nicht geht ist ja normal). ich nehme an dass dieser container all menue darüberliegt und so das aufgeklappte dahinter verschwindet. habe dann versucht über den z-index das zu lösen, es funktioniert aber weiterhin nicht. der gepostete code ist aber jetzt das 'original' (ohne meine änderungen die nichts gebracht haben). ich hoffe dass mir jemand weiterhelfen kann, ich drehe wohl an den falschen schrauben.
jetzt schon ein grosses dankeschön für jeden tipp, den ich bin schon fast am verzweifeln.
danke!
css code navigation
- Code: Alles auswählen
.menu ul {padding:0; margin:0; list-style: none; }
.menu ul li { float: left; position:relative; }
.menu ul li ul {display: none; }
.menu ul li:hover a { }
.menu ul li:hover ul {display:block; position: absolute; top:60px; background-color: #04080C; border-bottom: solid; border-color: #900; }
.menu ul li:hover ul li a {display:block; color: #900; }
.menu ul li:hover ul li a:hover {background:#; color: #F00;}
#menustyle { margin: 0px; width: 940px; height: 100px; }
#linkeecke { float: left; width: 22px; height: 27px; background-image: url(../img/menueckelinks.gif); background-repeat: no-repeat; background-position: bottom; }
#mitte { margin-left: 22px width: 880px; height: 26px; background-image: url(../img/menuhintergrund.gif); }
#rechteecke { float: right; width: 20px; height: 27px; background-image: url(../img/menueckerechts.gif); background-position: bottom; background-repeat: no-repeat; }
css ausschnitt inhalt
- Code: Alles auswählen
#e-sign { position: absolute; width: 260px; height: 266px; background-image: url(../img/e-sign.jpg); z-index: 120; }
#clips { position: absolute; left: 260px; top: 5px; width: 248px; height: 89px; background-image: url(../img/-clips.jpg); }
#all-menu { position: absolute; left: 85px; top: 140px; z-index: 100; width: 1107px; background-color: #04080C; }
#randlinks { background-image: url(../img/randlinks.gif); background-position: left; background-repeat: repeat-y; }
#blau { margin: 30px 0 0 240px; }
#blauobenlinks { float: left; width: 295px; height: 27px; background-image: url(../img/blaueckeobenlinks.jpg); }
#blauobenrechts { float: right; width: 306px; height: 27px; background-image: url(../img/blaueckerechtsoben.png); }
#blauobenmittegif { height: 2px; background-image: url(../img/blaumitteoben.gif); background-position: top; background-repeat: repeat-x; background-color: #1B2D5E; }
#blaumitte { background-image: url(../img/randfurblau.gif); background-position: left; background-repeat: repeat-y; background-color: #1C2E5E; min-height: 300px; }
- Code: Alles auswählen
<div id="menu_p">
<div id="menustyle">
<div id="linkeecke">
</div>
<div id="rechteecke">
</div>
<div id="mitte">
</div>
</div>
<div class="menu">
<ul>
<li><a class="menutrenn" href="e-clips.html">home</a></li>
<li><a class="menutrenn" href="team.html">Team</a>
<ul>
<li><a href="models.html">Models</a></li>
<li><a href="partner.html">Partner</a></li>
</ul>
</li>
<li><a class="menutrenn" href="service.html">Service</a>
<ul>
<li><a href="agb.html">AGB</a></li>
</ul>
</li>
<li><a class="menutrenn" href="equipment.html">Equipment</a></li>
<li><a class="menutrenn" href="referenzen.html">Referenzen</a></li>
<li><a class="menutrenn" href="kontakt.html">Kontakt</a></li>
</ul>
</div>
</div>
<div id="all-menu">
<div id="randlinks">
<div id="blau">
<div id="blauoben">
<div id="blauobenlinks"> </div>
<div id="blauobenrechts"> </div>
<div id="blauobenmittegif"> </div>
</div>
<div id="blaumitte">
<div id="text"><p>Lorem ipsum
</div>
</div>
