Simple Controls Gallery overlapping menu

[so7invictus]

1) Script Title: Simple Controls Gallery

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...plegallery.htm

3) Describe problem:
I've been using this script for some time now and it works fine, until recently i added a simple css-based (using ordered list) multi-level menu script onto my page. The problem is the simple gallery overlaps the menu (menu on top of the gallery), meaning the menu is hidden behind the gallery.

I can't remember where I got the menu script from, but the main javascript looks like this:

var menu=function(){
	var t=15,z=50,s=6,a;
	function dd(n){this.n=n; this.h=[]; this.c=[]}
	dd.prototype.init=function(p,c){
		a=c; var w=document.getElementById(p), s=w.getElementsByTagName('ul'), l=s.length, i=0;
		for(i;i<l;i++){
			var h=s[i].parentNode; this.h[i]=h; this.c[i]=s[i];
			h.onmouseover=new Function(this.n+'.st('+i+',true)');
			h.onmouseout=new Function(this.n+'.st('+i+')');
		}
	}
	dd.prototype.st=function(x,f){
		var c=this.c[x], h=this.h[x], p=h.getElementsByTagName('a')[0];
		clearInterval(c.t); c.style.overflow='hidden';
		if(f){
			p.className+=' '+a;
			if(!c.mh){c.style.display='block'; c.style.height=''; c.mh=c.offsetHeight; c.style.height=0}
			if(c.mh==c.offsetHeight){c.style.overflow='visible'}
			else{c.style.zIndex=z; z++; c.t=setInterval(function(){sl(c,1)},t)}
		}else{p.className=p.className.replace(a,''); c.t=setInterval(function(){sl(c,-1)},t)}
	}
	function sl(c,f){
		var h=c.offsetHeight;
		if((h<=0&&f!=1)||(h>=c.mh&&f==1)){
			if(f==1){c.style.filter=''; c.style.opacity=1; c.style.overflow='visible'}
			clearInterval(c.t); return
		}
		var d=(f==1)?Math.ceil((c.mh-h)/s):Math.ceil(h/s), o=h/c.mh;
		c.style.opacity=o; c.style.filter='alpha(opacity='+(o*100)+')';
		c.style.height=h+(d*f)+'px'
	}
	return{dd:dd}
}();

Is there a way to modify the Simple Gallery so that it stays behind any pull-down menus?

Thanks in advance.

[jscheuer1]

That's governed by z-index. In your menu script that appears to be set by the variable z. The gallery uses a top z-index of 1001, so change z in your script as shown:

var menu=function(){
	var t=15,z=1002,s=6,a;
	function dd(n){this.n=n; this.h=[]; this.c=[]}
	dd.prototype.init=fun . . .

To take effect, z-index depends upon an element's style position being either absolute or relative, and there can be inheritance issues (the parent element must sometimes also have relative or absolute position and a z-index as high as the child) in one or more browsers, otherwise the z-index might not have the desired effect. If any of this is an issue, it can almost always be remedied in the stylesheet and/or by adding a class or id to the menu's markup. But just making the above change may be all that's needed. There's no way to be certain from what you've told so far.

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.