Guys

I am getting desperate now and more than willing to pay someone to finish this damn menu off for me and get it working.

You can view the 3 sample menus here
http://www.sonsofsparta.com/cssdrop/cssdrop.html
It works well be it a white flash stutter in IE7, but ...

I need the IE 6 hover issue fixing to work with Ie6, and some weird allignments in Firefox.

If anyone can take this code and fix it to work I am willing to pay them for their time now as this is ruinning my life.

the code in full...

HTML
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href='cssdrop.css' rel='stylesheet' type='text/css' />
<title>CSS Drop</title>
<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>


</head>

<body>

			
<ul id='nav'>
	<li class='gold'>Menu Gold
	<ul>
		<li class=''><a href='Sub Menu 1'>Sub Menu 1</a></li>
		<li class=''><a href='Sub Menu 2'>Sub Menu 2</a></li>
		<li class=''><a href='Sub Menu 3'>Sub Menu 3</a></li>
		<li class=''><a href='Sub Menu 4'>Sub Menu 4</a></li>
	</ul>
	</li>
	<li class='green'>Menu Green
	<ul>
		<li class=''><a href='Sub Menu 1'>Sub Menu 1</a></li>
		<li class=''><a href='Sub Menu 2'>Sub Menu 2</a></li>
		<li class=''><a href='Sub Menu 3'>Sub Menu 3</a></li>
		<li class=''><a href='Sub Menu 4'>Sub Menu 4</a></li>
	</ul>
	<li class='pink'><a class='pink' href=''>Menu Pink</a></li>
</ul></div>
<div id="clearleft">

</body>
</html>
CSS
Code:
#nav{
list-style:none;}

#nav ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
	/*line-height: 1;*/
	height:36px;

}

#nav a {
	display: block;
	
	text-decoration:none;
	color:#FFFFFF;

}

#nav li { /* all top list items */
	float: left;
	width: 160px; /* width needed or else Opera goes nuts */
		text-align:center;
		font-size:13px;
	font-weight:bold;
	color:#FFFFFF;
			height:36px;
}

#nav li:hover{
		height:123px;
			

}


#nav li ul { /* second-level lists */
	position: relative;

	width: 10em;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
	text-align:left;
		top:91px; /* set to start after image */
	
		
}

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
	margin:0;
	padding:0;
		
}

#nav ul li{
font-size:11px;
font-weight:normal;
text-align:left;
padding-left:5px;
height:18px;

padding-bottom:10px;

}

#nav ul li:hover{
height:18px; /* required to prevent 2nd level li set to 123 */

}

#nav ul li a:hover{
	background:#ffffff;
opacity: .4;
filter: alpha(opacity=40);
color:#000000;
width:100%;
margin-left:-5px; /* moves hover block left and then re pads the text */
padding-left:5px;

}
#clearleft {
	clear: left;
	color: #ccc;
}


/*menu 1 Gold */

#nav li.gold {
width: 170px; /* width needed or else Opera goes nuts */

}
#nav a.gold {
width: 165px; /* width needed or else Opera goes nuts */

}
#nav .gold li{
width:160px; /* 5 less for padding in nav ul li * only overided in gold class as its wider*/

}

.gold{
	width:170px;
	background:url(images/menu/menubarLeft.jpg) no-repeat left top;

}
.gold:hover, .gold.sfhover{
width:170px;
background-image:url(images/menu/menubar1.gif);

}


#nav li:hover.gold ul{
background-image:url(images/menu/menu1btm.gif);
background-repeat:no-repeat;
	background-position:bottom;
	height:auto;
	top:108px;
	padding-top:0px;
	padding-bottom:7px;
	width:165px;

}


.gold li{
	background-color:#DDAF01;
	Background-image:url(images/menu/menu1li.gif);
	background-repeat:no-repeat; 
	background-position:bottom ;
}

/*menu 3 green*/
#nav li.green {
width: 160px; /* width needed or else Opera goes nuts */

}
#nav a.green {
width: 155px; /* width needed or else Opera goes nuts */

}
#nav .green li{
width:150px; /* 5 less for padding in nav ul li * only overided in gold class as its wider*/

}
.green{
	width:160px;
	background:url(images/menu/menubarCentre.jpg) no-repeat left top;

}
.green:hover, .green.sfhover{
width:160px;
background-image:url(images/menu/menubar3.gif);
}


#nav li:hover.green ul{
background-image:url(images/menu/menu3btm.gif);
background-repeat:no-repeat;
	background-position:bottom;
	height:auto;
	top:108px;
	padding-top:0px;
	padding-bottom:7px;
	width:155px;

}


.green li{
		background-color:#48af53;
	Background-image:url(images/menu/menu3li.gif);
	background-repeat:no-repeat; 
	background-position:bottom ;
	width:155px;
}

/*menu 6/ pink */
.pink{

	width:160px;
	height:36px;
	text-align:center;
	font-size:13px;
	font-weight:bold;
	color:#FFFFFF;
	background:url(images/menu/menubarRight.jpg) no-repeat right left;
	z-index:2;
	display:block;
	
}
.pink:hover{
float:left;
	position:relative;
	width:160px;
	height:36px;
	text-align:center;
	font-size:13px;
	font-weight:bold;
	color:#FFFFFF;
background-image:url(images/menu/menubar6.jpg);
background-position:top;
padding-bottom:2px;
z-index:2;
}

li.pink ul{
padding-left:0px;
background-image:url(images/menu/menu6btm.gif);
background-repeat:no-repeat;
	background-position:bottom;
	height:auto;
	top:123px;
	padding-top:0px;
	padding-bottom:7px;
	width:155px;
	left:2px;
}


.pink li{
padding-top:0px;
padding-bottom:4px;
width:155px;/*sets width of list*/
	padding-left:0px;
	background-color:#dc0cac;
	font-size:8px;
	font-weight:normal;
	display:block;
	position:relative;
	/*brings list inleft:2px;*/
	Background-image:url(images/menu/menu6li.gif);
	background-repeat:no-repeat;
	background-position:bottom;
	margin-top:0px;
	z-index:2;
	position:relative;
}
.pink li a{
width:155px;/*sets width of list*/
	padding-left:0px;
	margin-top:0;
	padding-top:0;
	/*background-color:#DDAF01;*/
	font-size:10px;
	display:block;
	z-index:2;
background-color:#dc0cac;
}
please please help if you can, I wil pay via paypal and can talk to me on msn on funkykid247@hotmail.com

thanks