Assigning a z-index to a class or a:hover (Tabs with CSS rollover images)

For my new website I’d like to include tabs for navigation. The tricky part is that these tabs should be overlapping each other AND fit on a transparent background. I have been playing with different techniques, including using Unnumbered Lists with [I]‘Sliding Doors’[/I] and [I]‘CSS Rollover images’[/I]. ([URL=http://www.alistapart.com/articles/slidingdoors2/]A List Apart[/URL]) It all works just fine, even with overlapping tabs. ([URL=http://www.alpinetrekking.com/test1/]Test 1[/URL]) But the method fails on a transparent background. This is because the remaining part of the sliding door will shine through.

I have tried to solve the problem by placing each tab in a separate DIV. ([URL=http://www.alpinetrekking.com/test2/]Test 2[/URL]) Each DIV has a background image that changes either on [I]‘a:hover’[/I], or when the DIV class is set to [I]‘.on’[/I]. These DIVs [I]can[/I] overlap, and thus overlapping tabs could be created.

In theory it seems great, however, I have two problems:

[B]1.[/B] The [I].on[/I] class doesn’t work.
[B]2.[/B] When hovering, a small part of the image for the next DIV is still shining through. I tried solving this by using z-indexes, but without luck. Strangely enough it DOES work when I take out the z-index of the NEXT tab in the list.

Attached you will find the full off-line versions, including images.

Who can help me out?
Cheers, Jochem ?

[upl-file uuid=8ef6e269-af7b-47ea-99cd-64a7d6c67d85 size=26kB]Test1.zip[/upl-file]

[upl-file uuid=4b7ce4ea-f9c3-41ac-bb1d-bea04e565144 size=5kB]Test2.zip[/upl-file]

Also in #CSS _↴