CSS-based image rollover for suckerfisk-type navigation menu?

I posted a request earlier for CSS-based image rollovers and was directed to use the 'z-index' to do it. I understand how that works, but I don't know how I can apply it to my nav bar. I used a simple suckerfish-type horizontal navigation, and all my images are nested in the html for my <li>. All the examples I see that use the z-index only apply them to divs that they can assign the hover command to. A preview of my site is up at http://deepwaterchurch.com/prelive if anyone would care to take a look. I'd appreciate any help I could, and I'd rather not do this with clunky java script if I can help it. Thanks.

What exactly is the problem? I tried that link sans JS, and the menu worked...

I'm trying to make it so that when I roll over the images (i.e. home) it changes to a different over-state (i.e. underlined, colored, etc). I'd like to do this for the menu and sub menu pics.

You can see the CSS rollover effect in one of my demos (http://www.jsgp.us/demos/D0002.html). It doesn’t look like CSS rollovers aren’t appropriate for your case because your images represent content. I would use JavaScript to manipulate the existing img elements.