Can this be done? A drop down menu with different class/image to each menu?

[scotchegg78]

Hello again guys.

 

I have been tweaking a menu I need to make and its getting closer, but as ever teh finish seems so far away!

 

I am using a suckerfish menu, and i have it working ok, all except for the fact each drop down has its own class and colour/image.

So when i call for example

 

.gold:hover, li.sfhover {
width:160px;
height:128px;
background-image:url(images/menu/menubar1.png);

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

}

 

the green class will replace the sfhover image used in the gold class?

 

the JS is ...

<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>

 

the list code if this helps...

<ul id='nav'>
<li class='gold'>Menu 1

<ul>
<li class=''><a href='item 1'>Item 1</li>
<li class=''><a href='item 2'>Item 2</li>
<li class=''><a href='item 3'>Item 3</li>
<li class=''><a href='item 4'>Item 4</li>
</ul>
</li>
<li class='green'>Menu 2

<ul>
<li class=''><a href='item 1'>Item 1</li>
<li class=''><a href='item 2'>Item 2</li>

...

Sorry I am not upto speed with this, how would i modifiy this JS or css calls to only use the hover function specific to each class?

 

Thanks for any help guidance or input.