IE6 Dropdownmenü

[Verena]

Hallo zusammen,

der IE6 wird zwar hoffentlich bald von der Bildfläche verschwinden, dennoch muss ich eine Seite, die ein Dropdownmenü verwendet, auch noch dort sichtbar machen.
Da ich zwischenzeitlich alle möglichen Seiten nach entsprechender Hilfe durchforstet habe, wende ich mich jetzt doch noch direkt an euch und hoffe auf Hilfe.

Derzeit sieht mein CSS wie folgt aus: (ggf. kann auf das ein oder andere verzichtet werden...)

/*********** Header Navigation ***********/
#mainnav{padding-top:134px;padding-left:65px;font-size:12px;line-height:1;}
#mainnav ul,#mainnav li{margin:0;padding:0;list-style-type:none;z-index:120;background-color:#ffffff;}
#mainnav li{float:left;}
#mainnav a{display:block;padding:8px 20px 9px 35px;font-weight:bold;color:#000000;background-image:url("http://www.wirtschaftsberatung-fath.de/wb/tl_files/wbf/images/menupunkt.gif");background-repeat:no-repeat;background-position:0px 7px;text-decoration:none;margin-right:12px;}
#mainnav a:hover, #mainnav p.active{text-decoration:none;color:#77263c;font-weight:bold;padding:8px 20px 9px 35px;background-image:url("http://www.wirtschaftsberatung-fath.de/wb/tl_files/wbf/images/menupunktaktiv.gif");background-repeat:no-repeat;background-position:0px 6px;}
#mainnav a.trail{text-decoration:none;color:#77263c;font-weight:bold;padding:8px 20px 9px 35px;background-image:url("http://www.wirtschaftsberatung-fath.de/wb/tl_files/wbf/images/menupunktaktiv.gif");background-repeat:no-repeat;background-position:0px 6px;}
#mainnav span{display:block;margin:0px;padding:8px 18px 9px 17px;color:#000000;}
#mainnav .level_1 ul{width:185px;left:-999em;position:absolute;}
#mainnav .level_2 li{float:none;}
#mainnav .level_2 a:hover{background-image:url("http://www.wirtschaftsberatung-fath.de/wb/tl_files/wbf/images/menupunktaktiv.gif");background-repeat:no-repeat;background-position:0px 7px;padding:8px 20px 9px 35px;}
#mainnav li:hover .level_2{left:auto;z-index:120;background-color:#ffffff;}
.subnav ul{margin:0;}
.subnav li{padding-left:0;list-style-type:none;}
.subnav p{display:inline;margin-bottom:0;}
.subnav a.trail{text-decoration:none;color:#77263c;font-weight:bold;padding:8px 20px 9px 35px;background-image:url("http://www.wirtschaftsberatung-fath.de/wb/tl_files/wbf/images/menupunktaktiv.gif");background-repeat:no-repeat;background-position:0px 7px;}
.subnav .level_2{margin-left:18px;}

/**** fuer IE 7 ******/
.headernav ul li:hover ul, .headernav ul li.sfhover ul{display:block;}
.headernav ul li:hover ul ul, .headernav ul li.sfhover ul ul {display:none;}
.headernav ul ul li:hover ul, .headernav ul ul li.sfhover ul {display:block;}
#mainnav li:hover ul, #headernav li.sfhover ul {left: auto;}

Durch die Hilfestellungen dachte ich eigentlich, dass der Teil für IE7 bereits für IE6 funktioniert... leider tut er das nicht. Für IE7 ergibt er allerdings eine etwas bessere Darstellung als zuvor.

Wisst ihr was ich machen kann?

[planepix]

Hallo Verena,

ja der IE 6 kann ein hover nur auf Linkelemente anzeigen bzw nutzen. Um das Menü auch im IE6 zu nutzen, musst Du mit Javascript nachhelfen.

Informationen findest Du im Wiki .

[Verena]

Hi,

danke für die schnelle Antwort.
Ich hatte schon gelesen, dass ich JavaScript wohl nutzen muss.
Dadurch habe ich dann auch folgende Funktion, die mir "empfohlen" wurde aufgenommen:

sfHover = function() {
  var sfEls = document.getElementById("header").getElementsByTagName("li");
  for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" sfhover";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

Scheinbar reicht das aber nicht - oder aber ich hab´s falsch eingebunden.
Kannst du mir dazu noch was sagen?

[planepix]

Hallo Verena,
ist denn die Javascript-Datei im Seitenlayout eingebunden?
Unter "Zusätzliche Head-Tags"?

[Verena]

Hi planepix,
eigentlich schon. Habs mit
<script type="text/javascript" src="plugins/sfHover.js"></script>
eingebunden.

[MacKP]

Hallo Verena,
ich habe festgestellt, das die Hammer Methode teilweise besser funktioniert beim IE6 ;-)

Versuchs direkt mal mit diesem JavaScript: http://code.google.com/p/ie7-js/

Dann hast direkt noch ein paar Extras mehr für den IE6 und kannst dem mehr schönes CSS unterschieben *g*

Viele Grüße

[Verena]

Hallo MacKP,

danke für den Hinweis - hat geklappt.
An den CSS-Änderungen muss ich jetzt wohl etwas basteln - er hat mir doch so einiges verschoben.
Aber das wird jetzt wohl das kleinere Problem sein.

DANKE

Grüße
Verena

[MacKP]

Hallo Verena,
sehr schön das es geholfen hat.

Viel Erfolg noch ;-)

[manela]

Hier auch noch eine beschriebene Vorgehensweise von Dr. Web, wie ich sie oft einsetze: http://www.drweb.de/magazin/das-perf...n-dimensionen/

Ich hab zwar schon mal davon gehört, dass es wohl Besucher gibt, die .htc-Dateien über den Browser verbieten, bei meinen Kunden, Testusern, etc. hat das bisher jedoch noch nie Probleme bereitet.

Viele Grüße
Manu