• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

CSS Menü Fehler im IE

T

Tinchen

Neues Mitglied
Ich habe folgendes CSS Menü erstellt:

Code: 
            <ul id="css3menu1" class="topmenu">                 <li class="topmenu"><a href="[URL="http://www.html.de/view-source:http://tinchen1.ohost.de/index.html"]index.html[/URL]" style="height:16px;line-height:16px;">Home</a></li>                 <li class="toproot"><a href="[URL="http://www.html.de/view-source:http://tinchen1.ohost.de/referenzen.html"]referenzen.html[/URL]" style="height:16px;line-height:16px;"><span>Referenzen</span></a>                 <ul>                     <li><a href="[URL="http://www.html.de/view-source:http://tinchen1.ohost.de/wege.html"]wege.html[/URL]">Wege-, Terrassen- und Treppenbau</a></li>                     <li><a href="[URL="http://www.html.de/view-source:http://tinchen1.ohost.de/rasen.html"]rasen.html[/URL]">Rasen- und Beetpflege</a></li>                     <li><a href="[URL="http://www.html.de/view-source:http://tinchen1.ohost.de/baumpflege.html"]baumpflege.html[/URL]">Baumpflege, Fällungen und Seilklettertechnik</a></li>                     <li><a href="[URL="http://www.html.de/view-source:http://tinchen1.ohost.de/holzarbeiten.html"]holzarbeiten.html[/URL]">Holzarbeiten</a></li>                     <li><a href="[URL="http://www.html.de/view-source:http://tinchen1.ohost.de/techbau.html"]techbau.html[/URL]">Teichbau</a></li>                     <li><a href="[URL="http://www.html.de/view-source:http://tinchen1.ohost.de/erdarbeiten.html"]erdarbeiten.html[/URL]">Erd- und Ausschachtungsarbeiten</a></li>                 </ul></li>                 <li class="topmenu"><a href="[URL="http://www.html.de/view-source:http://tinchen1.ohost.de/kontakt.php"]kontakt.php[/URL]" style="height:16px;line-height:16px;">Kontakt</a></li>                 <li class="topmenu"><a class="pressed" href="[URL="http://www.html.de/view-source:http://tinchen1.ohost.de/impressum.html"]impressum.html[/URL]" style="height:16px;line-height:16px;">Impressum</a></li>             </ul>         </div>

style.css
Code: 
ul#css3menu1,ul#css3menu1 ul{     margin:0;     list-style:none;     padding:0;     background-color:;     border-width:0;     border-style:solid;     border-color:; }  ul#css3menu1 ul{     display:none;     position:absolute;     left:0;top:100%;     background-color:#279F38;     border-radius:0 0 10px 10px;-moz-border-radius:0 0 10px 10px;     -webkit-border-radius:0;     -webkit-border-bottom-right-radius:10px;     -webkit-border-bottom-left-radius:10px;     behavior: url(PIE.htc);     padding:0 0 10px; }  ul#css3menu1 li:hover>*{     display:block; }  ul#css3menu1 li{     position:relative;     display:block;     white-space:nowrap;     font-size:0;     float:left;     z-index:1; }  ul#css3menu1 li:hover{     z-index:999; }  ul#css3menu1{     font-size:0;     z-index:999;     position:relative;     display:inline-block;zoom:1;     padding:10px 10px 10px 0;     border-radius:0px;     -moz-border-radius:0px;     -webkit-border-radius:0px;     behavior: url(PIE.htc);     *display:inline; }  * html ul#css3menu1 li a{     display:inline-block; }  ul#css3menu1>li{     margin:0 0 0 10px; }  ul#css3menu1 ul>li{     margin:10px 0 0; }  ul#css3menu1 a:active, ul#css3menu1 a:focus{     outline-style:none; }  ul#css3menu1 a{     display:block;     vertical-align:middle;     text-align:left;     text-decoration:none;     font:13px Verdana,Geneva,sans-serif;     color:#fff;     cursor:default;     padding:3px;     background-color:#279F38;     background-repeat:repeat;     border-width:0px;     border-style:none;     border-color:; }  ul#css3menu1 ul li{     float:none;     margin:0; }  ul#css3menu1 ul a{     text-align:left;     padding:4px;     background-color:#279F38;     border-width:0 0 1px 0;     border-style:solid;     border-color:#3B444C;     border-radius:0px;     -moz-border-radius:0px;     -webkit-border-radius:0px;     behavior: url(PIE.htc);     font:13px Arial,sans-serif;     color:#fff;     text-decoration:none; }  ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{     background-color:#000;     border-style:none;     color:#fff;     text-decoration:none;     border-radius:10px;     -moz-border-radius:10px;     -webkit-border-radius:10px;     behavior: url(PIE.htc);     cursor:pointer; }  ul#css3menu1 span{     display:block;     overflow:visible;     background-image:url("arrowmain0.gif");     background-position:right center;     background-repeat:no-repeat;     padding-right:17px; }  ul#css3menu1 li:hover>a>span{     background-image:url("arrowmain1.gif");     cursor:pointer; }  ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li a.pressed{     background-color:#000;     border-style:solid;     border-color:#616D8E;     color:#FFFFFF;     text-decoration:none;     cursor:pointer; }  ul#css3menu1>li>a{     padding:3px 10px; }  ul#css3menu1 li.topmenu>a{     border-width:0 0 3px 0;     border-style:none;     border-radius:10px;     -moz-border-radius:10px;     -webkit-border-radius:10px;     behavior: url(PIE.htc);     padding:3px 10px; }  ul#css3menu1 li.topmenu:hover>a,ul#css3menu1 li.topmenu a.pressed{     border-style:none;     cursor:pointer; }  ul#css3menu1 li.toproot>a{     border-width:0 0 3px 0;     border-style:none;     border-color:#279F38;     border-radius:10px;     -moz-border-radius:10px;     -webkit-border-radius:10px;     behavior: url(PIE.htc);     padding:3px 10px; }  ul#css3menu1 li.toproot:hover>a,ul#css3menu1 li.toproot a.pressed{     border-style:solid;     border-color:#000;     border-radius:10px 10px 0 0;     -moz-border-radius:10px 10px 0 0;     -webkit-border-radius:10px;     -webkit-border-bottom-right-radius:0;     -webkit-border-bottom-left-radius:0;     behavior: url(PIE.htc);     cursor:pointer; }

Link zur Seite -> der Gärtner

Ich bekomme es einfach nicht hin, dass das Menü auch im IE richtig funktioniert. Ich habe extra für den IE7 den Z-Index für ul#css3menu1 niedriger gesetzt als für ul#css3menu1 li:hover

Aber das Untermenü will einfach nicht richtig funktionieren. Hat noch jemand einen Tipp für mich? Vielen Dank!
 
Hi Tinchen!
Dein z-Index wirkt sich nur für Elemente aus, die direkte Unterelemente des selbenen Elements sind. Das heißt dein z-Index im #css3menu1 in #menu hat keine Auswirkung auf irgendwas in #inhalt.
Vergib deinen z-index für die Elemente #header und #inhalt. Beide sind direkte Unterelemente von #box. Dann könnte das klappen.
Gruß!
Bodil
 
Sorry für die späte Rückmeldung. Ich hab das ganze jetzt nochmal probiert. Es funktioniert jetzt, ich sag mal..."halb". Das Untermenü erscheint jetzt über allen anderen divs, aber wird rechts irgendwie abgeschnitten. Bin mir jetzt aber auch nicht sicher, ob das nur im IE7 so ist oder auch in anderen Versionen. Die aktuelle Version ist online, könntest du dir meine Z-Indexe bitte nochmal anschauen, ob du es genauso gemacht hättest?

PS. Will heute abend mal noch den *+html hack einbauen und schauen, ob das zumindest im IE7 etwas verändert.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben