nicht angemeldet
Die Struktur:
Ich habe eine Menüleiste mit doppelter Liste an Links die jeweils über "float" horizontal angeordnet sind.
Mit hover zeigt sich bei modernen Browsern die zweite horizontale Liste beim überfahren der Links der ersten horizontalen Liste.
Die zweite Liste ist nur beim aktiven Link der ersten Liste zu sehen, bei allen anderen Links wird die zweite Liste dynamisch eingeblendet und beim Verlassen des entsprechenden Links der ersten Liste wieder ausgeblendet.
So, das alles funktioniert einwandfrei mit dem Mozilla Browser aber eben nicht mit dem Internet Explorer (Version 6).
Das Problem:
Um also die Dynamik beim IE aufrecht zu halten habe ich die Javascript Lösung von SELFHTML verwendet (siehe letztes Beispiel auf:http://de.selfhtml.org/css/layouts/navigationsleisten.htm) kann das Script aber nicht so anpassen dass die zweite Liste des aktiven Links angezeigt bleibt.
Immer wenn ich den aktiven link mit der maus berühre und wieder verlasse blendet sich die zweite Liste aus - und die müsste ja aktiv bleiben. Nur die zweite Liste der nicht aktiven Links (der ersten Liste) soll wieder verschwinden. Das klappt auch.
Die Frage:
Wie kann ich die zweite Liste des aktiven Links nach dem Verlassen dieses Links mit der Maus einblenden?
Ich muss eigentlich nur die entsprechende JavaScript Funktion des mouseout anpassen, aber wie?
Hilfsmaterial:
Ich habe schon eine Menge Versuche gemacht das Script entsprechend zu verändern aber ich bekomme es einfach nicht hin. Ich kann die zweite Liste nach dem Verlassen des entsprechenden aktiven Links der ersten Liste einblenden, aber sobald ich mit der Maus auf den nächsten Link der ersten Liste fahre zeigt sich beim Verlassen die zweite Liste des entrepchenden nicht-aktiven Links - usw.
Das geht solange bis die erste Liste durchgearbeitet ist und bleibt dann dort stehen (d.h. die zweite Liste des letzten LInks der ersten Liste bleibt nach mouseout bei allen LInks)
Script und CSS/ HTML code...
JavaScript:
function hoverIE() {
if(window.navigator.systemLanguage && !window.navigator.language){
var LI = document.getElementById("nav").firstChild;
do {
if (sucheUL(LI.firstChild)) {
LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
}
LI = LI.nextSibling;
}
while(LI);
}
}
function sucheUL(UL) {
do {
if(UL) UL = UL.nextSibling;
if(UL && UL.nodeName == "UL") return UL;
}
while(UL);
return false;
}
function einblenden() {
var UL = sucheUL(this.firstChild);
UL.style.display = "block"; UL.style.backgroundColor = "#6699FF";
}
function ausblenden() {
sucheUL(this.firstChild).style.display = "none";
}
CSS:
ul#nav li ul {display: none;}
ul#nav li.on ul {display: block;}
ul#nav li.off:hover ul, ul#nav li.over ul {display: block;z-index: 6000;}
HTML:
<ul id="nav">
<li id="liIni" class="on"><a href="Inicio.html"><span>Inicio</span></a>
<ul><li id="Lema" class="single">ESENSE. . . Aplicaciones Inalámbricas</li></ul></li>
<li id="liProductos" class="off"><a href="#"><span>Productos</span></a>
<ul><li class="subcategory1"><a href="Telemedicina.html" onmouseover="Telemedicina_preview ()" onmouseout="Inicio_preview ()">Telemedicina</a></li>
<li><a href="Medicina.html" onmouseover="Medicina_preview ()" onmouseout="Inicio_preview ()">Dermatología</a>
<li><a href="Desastres.html" onmouseover="Catastrofes_preview ()" onmouseout="Inicio_preview ()">Desastres</a><div class="clearfloat"></div></li></ul></li>
</ul>