✔ Fehler mit css Navi

[caramba12321]

Hi, ich habe eine dynamische Navi mit Hilfe von Css erstellt.
Diese funktioniert komischerweise aber nur im Mozilla und nicht im IE.
weiss vielleicht jemand Rat?


Gruss Caramba

 

[Maik]

Der IE (6.0) unterstützt die :hover-Pseudoklasse nicht für das li-Element, um so die Submenüs einzublenden.

Von daher wirst du ihm mit etwas Javascript unter die Arme greifen müssen, wie z.B. mit dem Suckerfish Dropdown Menü.

 

[caramba12321]

Also gibt es keine möglichkeit so eine Navi nur komplett über CSS zu realisieren?

 

[Maik]

In diesem Fall empfehle ich Dir Stu Nicholls' Multi-Level-Menus, die ohne Javascript auskommen.

 

[caramba12321]

hm, könnte mann sonst bei meinem menü einen javascript zusatz programmieren?
Also so, dass es auch im IE aussieht und wie würde das dann ca aussehen, kann leider so gut wie kein js

 

[Maik]

Schau Dir doch einfach mal den CSS-Code vom Suckerfish Dropdown Menü an und passe ihn auf Deine Seitenverhältnisse an.

Den Script-Code kannst Du dann 1:1 übernehmen, müsstest darin dann lediglich die ID nav in menue ändern:

startList = function() {
	if (document.all&&document.getElementById) {
		navRoot = document.getElementById("nav");
		for (i=0; i<navRoot.childNodes.length; i++) {
			node = navRoot.childNodes[i];
			if (node.nodeName=="LI") {
				node.onmouseover=function() {
					this.className+=" over";
				}
				node.onmouseout=function() {
					this.className=this.className.replace(" over", "");
				}
			}
		}
	}
}
window.onload=startList;

Und noch ein Hinweis zum Markup Deiner Seite: ein a-Element (= Inline-Element) darf kein div-Element (= Block-Element) enthalten.

 

[caramba12321]

danke hat funktioniert

ich weiss, ahb dafür nur noch keine bessere Lösung gefunden

oder weisst du da auch eiune Lösung für mich

 

[Maik]

Du kannst die CSS-Formatierungen der DIVs direkt auf die Links anwenden.

Als Beispiel mal der ID-Selektor #headerLogo:

a#headerLogo {
height: 255px;
width: 329px;
background: url(../images/logo.gif) no-repeat;
display: block;
}

a span {
display: none;
}

<a href="?content=home" id="headerLogo"><span>home</span></a>

 

[caramba12321]

ahh okay, vielen Dank.!