hover på andre elementer end <a> markøren
Hvis du kikker på www.dan-time.dk kan du se den side jeg arbejder på lige nu. Menuen er ren CSS, som bruges til at formatere en liste der ser således ud:<ul id="nav">
<li><a href="index.asp?side=1"><span class="topMenu">Forside</span></a>
<li><a href="#">Produkter</a>
<ul>
<li><a href="#">Stempelure</a>
<ul>
<li><a href="mekanisk.asp?side=7">Mekaniske</a></li>
<li><a href="elektronisk.asp?side=8">Elektroniske</a></li>
<li><a href="pc_baseret.asp?side=9">PC Baseret</a></li>
</ul>
</li>
<li><a href="#">PC programmer</a>
<ul>
<li><a href="danTimer.asp?side=10">Dan Timer</a></li>
<li><a href="danPlan.asp?side=11">Dan-Plan</a></li>
<li><a href="danTimerSql.asp?side=12">Dan-Timer SQL</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="profil.asp?side=2">Profil</a></li>
<li><a href="salg.asp?side=3">Salg</a></li>
<li><a href="referencer.asp?side=4">Referencer</a></li>
<li><a href="support.asp?side=5">Support</a></li>
<li><a href="#">Information</a>
<ul>
<li><a href="kontakt.asp?side=6">Kontakt</a></li>
<li><a href="job.asp?side=13">Ledige job</a></li>
<li><a href="brochure.asp?side=14">Brochure</a></li>
<li><a href="faq.asp?side=15">FAQ</a></li>
</ul>
</li>
</ul>
Det virker fin i ALLE nyere browsere på nær IE6. Når jeg ser det i lige præcis den browser er der ikke en menu, men en liste.
Hvordan søren får jeg styr på den del. Jeg har prøvet at bruge denne javascript kode, som angiveligt skulle fikse problemet med hover på andre elementer end <a> markøren:
sfHover = function() {
var sfEls = document.getElementById("nav").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);
Håber der er én der har en god idé til mig ??
