sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	var selects = document.getElementsByTagName("select");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
			for (var n=0; n<selects.length; n++) {
            /* Hides <select> tags, which appear above menu in IE */
            selects[n].className+=" hide_select";
            }
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
			for (var n=0; n<selects.length; n++) {
                /* Makes <select> tags visible again */
                selects[n].className = selects[n].className.replace(new RegExp(" hide_select\\b"), "");
            }
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

/* 
 * NOTE: In order for this snippet to work, you need to add the 
 * following lines (or something similar) to your CSS:
 *
 * select.hide_select {
 *     visibility: hidden;
 * }
 *
 * Using "display: none" may cause other elements to shift as the is 
 * completely removed from the flow of the document. By using
 * "visibility: hidden", the just becomes "invisible."
 */