Slide Show covering my navigation

[Chrys]

I am using CSS navigation that shows/hides on mouseover with a javascript function.

I also have a slide show on the page right under the navigation that fades images in and out.

When the navigation is visible over an image in the slideshow it is always on top EXCEPT when the image is fading in and out. Once the image is done fading the navigation goes back to the front. VERY ANNOYING!

I have tried the z-index with no luck and also tried playing with the absolute and relative positioning. Neither worked as I had hoped. i believe that the problem lies within the Javascript of the slideshow during the fading but I am not sure where to start...Any thoughts?

My code:

*Navigation*

CSS
#nav {
	width: 800px;
	margin: 0 auto;
	padding: 0px 10px;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	background-color: rgb(59, 98, 120);
}

#nav a {
	float: left;
	padding: 0 15px;
	height: 25px;
	line-height: 220%;
	font-weight: bold;
	color: rgb(235, 235, 235);
	font-size: 11pt;
	text-align: center;
	text-decoration: none;
}
	
#nav a:hover {
	color: rgb(0, 0, 0);
}

table.menu {
	background: rgb(79, 131, 161);
	position: absolute;
	visibility: hidden;
}

JAVASCRIPT
function showmenu(elmnt) 
{
	document.getElementById(elmnt).style.visibility="visible";
}

function hidemenu(elmnt) 
{
	document.getElementById(elmnt).style.visibility="hidden";
}

*Slideshow*

HTML
var imgArray = new Array();
	imgArray[0] = "images/ss1.jpg";
	imgArray[1] = "images/ss2.jpg";
	imgArray[2] = "images/ss3.jpg";
	imgArray[3] = "images/ss4.jpg";
	imgArray[4] = "images/ss5.jpg";
	imgArray[5] = "images/ss6.jpg";
	imgArray[6] = "images/ss7.jpg";
	imgArray[7] = "images/ss8.jpg";
	imgArray[8] = "images/ss9.jpg";

slideshowFade('Slideshow1','',imgArray,8,3000);

JAVASCRIPT
var slideshowFadeAnimate = new Array();
var slideshowFadeTimer   = new Array();
var slideshowFadeCount   = new Array();
var slideshowFadeImages  = new Array();

function slideshowFade(id,cl,imageArray,fadeInterval,holdTime)
{
	if(cl)
		cl = ' class="'+cl+'"';
		document.write('<div id="'+id+'"'+cl+'><img id="'+id+'img" onload="slideshowFadeRun(\''+id+'\')"/></div>');

	var ss = document.getElementById(id+'img');
	
	slideshowFadeCount[id]   = 0;
	slideshowFadeImages[id]  = imageArray;
	slideshowFadeAnimate[id] = 'run';
	slideshowFadeTimer[id]   = setInterval('slideshowFadeAnimation(\''+id+'\',\''+holdTime+'\');',fadeInterval);
}

function slideshowFadeAnimation(id,holdTime)
{
	if(slideshowFadeAnimate[id]=='run')
	{
		var obj = document.getElementById(id+'img');
		var opa = slideshowFadeCount[id]%200;
		if(opa==0)
		{
			slideshowFadeAnimate[id] = 'load';
			obj.src = slideshowFadeImages[id][Math.floor(slideshowFadeCount[id]/200)%slideshowFadeImages[id].length];
		}
		else if(opa==100)
		{
			slideshowFadeAnimate[id] = 'hold';
			setTimeout('slideshowFadeRun(\''+id+'\')',holdTime);
		}
		else if(opa>100)
			opa = 200-opa;
			obj.style.opacity = (opa/100).toString();
			obj.style.filter  = "alpha(opacity="+opa.toString()+")";
			slideshowFadeCount[id]++;
		if(slideshowFadeCount[id]==(slideshowFadeImages[id].length*200))
			slideshowFadeCount[id]=0;
	}
}

function slideshowFadeRun(id)
{
	slideshowFadeAnimate[id] = 'run';
}