Javascript depth?

Figment

I have a drop down menu like this: http://www.spoiltchild.com/new/dropdown.gif
I am having a problem with the menu appearing behind Select items as you can see.
Is there a way to get it to appear over those items?

//<script type="text/javascript"> // fool IDE into treating as script in HTML
function setDrop(navRoot){
	for (i=0; i<navRoot.childNodes.length; i++) {
		node = navRoot.childNodes[i];
		if (node.nodeName=="LI") {
			node.onmouseover=function() {
				this.className+=" over";
			}
			node.onmouseout=function() {
				this.className=this.className.replace(" over", "");
			}
			if (navRoot.className == "ddn"){
				for(j=0; j<node.childNodes.length; j++){
					grChild = node.childNodes[j];
					if (grChild.nodeName=="UL")
						grChild.style.top = "-82px";
				}
			}
		}
	}
}
function setDivDrop(div){
	div.timer = 0;
	div.onmouseover = function(){
		this.className = "over";
		if (this.timer){
			clearTimeout(this.timer);
			this.timer = 0;
		}
	}
	div.onmouseout = function(){
		//this.timer = setTimeout('document.getElementById(' + this.id + ').className=""',500);
		this.timer = setTimeout('document.getElementById("' + this.id + '").className=""',250);
	}
}
window.onload = function() {
	if (document.all&&document.getElementById&&navigator.userAgent.indexOf("Opera")==-1) {
		navRoot = document.getElementById("droplist");
		if (navRoot)
			setDrop(navRoot);
		navRoot = document.getElementById("droplist0");
		if (navRoot)
			setDrop(navRoot);
		navRoot = document.getElementById("droplist1");
		if (navRoot)
			setDrop(navRoot);
		var iter = 2;
		navRoot = document.getElementById("droplist" + iter);
		while (navRoot){
			setDrop(navRoot);
			navRoot = document.getElementById("droplist" + ++iter);
		}
	}
	if(document.getElementById){
		setDivDrop(document.getElementById("topHist"));
		iter = 0;
		navRoot = document.getElementById("divDrop" + iter);
		while (navRoot){
			setDivDrop(navRoot);
			navRoot = document.getElementById("divDrop" + ++iter);
		}
	}
}

dahamsta

I can't say for certain, but I'm pretty sure that the answer is no. SELECT menus are inherited from the operating system and so take precedence over other elements in the page; this is why styling SELECT elements can be messy too.

adam

Eoin

Hi, I think the CSS "z-index" property allows you to specify "layers" on a webpage, but like dahamsta said, a select box will always take precedence - I have the same problem and still haven't figured a way around it..

daymobrew

The boards.ie dropdown menu works fine for me in Firefox and IE 6 on XP.
From the screenshot you will see the menu *over* the '[Color]' select item in the 'Reply to Thread' page. Maybe the code here will make for interesting reading.