// Search and replace sfhover2 with whatever your unique class name will be.
sfhover2 = function() {

	// This defines the name of your div.
	var div_id = "nav";

	// In case your menus span a select box, you need to add an iframe.
	// The id of the iframe must also be unique on your page
	// If you don't need to worry about select boxes, just don't put an iframe on the page.
	// If you are not using an iframe, this id should be something that makes sense, but does not
	// appear on the page.
	var iframe_id = "menu_iframe";

	var sfEls = document.getElementById(div_id).getElementsByTagName("li");
	for (var i=0; i<sfEls.length; i++) {
		// This defined what happens when you roll over.
		sfEls[i].onmouseover=function() {
			// This is the name of the class you are creating.  They must be unique.
			// This is sfhover2
			this.className+=" sfhover2";
			
            if(document.getElementById(iframe_id)) {
            	var iframe = document.getElementById(iframe_id);
            	var submenu = this.getElementsByTagName("ul");
            	if(submenu.length) {
            		iframe.style.top = submenu[0].offsetTop + this.offsetTop;
            		iframe.style.left = submenu[0].offsetLeft + this.offsetLeft;
            		iframe.style.width = submenu[0].scrollWidth;
            		iframe.style.height = submenu[0].clientHeight;
            		iframe.style.display = "inline";
            	}
            }
		}
		
		// This defines what happens when you roll off.
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover2\\b"), "");
			
			if(document.getElementById(iframe_id)){
				var iframe = document.getElementById(iframe_id);
				iframe.style.display = "none";
			}
		}
	}
}

if (window.attachEvent){
	window.attachEvent("onload", sfhover2);
}