I've made a bit of a javascript cockup..(cssmenu and IE related)

[GregP]

Hi guys,

I ended up altering the xhtml for my navigation menu when it had probably been easier to stick with the default setup and styling it myself, but that didn't happen 

I can get it to display how it should in Firefox, but I can't get the javscript to enable the dropdown in IE (I'm a jscript novice if that wasn't obvious enough)

XHTML:

Code: Select all

<ul class="nav">
	<li class="menuactive"><a class="menuactive" href="home"><dfn>1: </dfn>Home</a></li>
	<li><a href="easy-business/" ><dfn>2: </dfn>Easy Business</a></li>

<li class="menuparent"><a class="menuparent" href="property-rental/" ><dfn>3: </dfn>Property Rental</a>

<ul>
	<li><a href="property-rental/apartment-bartman/" ><dfn>3.1: </dfn>Apartment Bartman</a></li>
	<li><a href="property-rental/apartment-villa-eva/" ><dfn>3.2: </dfn>Apartment Villa Eva</a></li>
</ul>
</li>
	<li><a href="property-management/" ><dfn>4: </dfn>Property Management</a></li>
	<li><a href="golf-holiday-tours/" ><dfn>5: </dfn>Golf Holidays and Tours</a></li>
	<li><a tours-and-visits/" ><dfn>6: </dfn>Tours and Visits</a></li>
</ul>

The default javascript I was (badly) customizing:

Code: Select all

// Javascript for the CMS CSS Menu Module
// Copyright (c) 2005 Alexander Endresen
// Released under General Public Licence
// This script will emulate the css :hover effect on the menu elements in IE

// The variables
var cssid = "primary-nav"; // CSS ID for the menuwrapper
var menuadd = "h";  // Character to be added to the specific classes upon hovering. So for example, if this is set to "h", class "menuparent" will become "menuparenth" when hovered over.
var menuh = "menuh"; // Classname for hovering over all other menu items

if (window.attachEvent) window.attachEvent("onload", cssHover);

function cssHover() {
	var sfEls = document.getElementById(cssid).getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {

		sfEls[i].onmouseover=function() {
			if (this.className != "") {
				this.className = this.className + menuadd;
			}
			else {	
				this.className = menuh;
			}
		}

		sfEls[i].onmouseout=function() {
			if (this.className == menuh) {
				this.className = "";
			}
			else {
				this.className = this.className.replace(new RegExp(menuadd + "$"), "");
			}
		}
	}
}

I tried changing the primary-nav to just nav and all instances of id to class, but to no avail.

Any ideas?

Many thanks