Onglets qui se superposent partiellement

Bonjour,

Je suis en train de faire un menu avec des onglets qui doivent se superposer très partiellement comme l'indique le détail ci-dessous :



mon problème c'est que le débordement s'effectue correctement sur la partie gauche de l'onglet actif mais pas sur sa partie droite
(autrement dit l'onglet actif passe sous l'onglet voisin, inactif lui)

J'ai tenté de mettre des z-index aux endroits adéquats mais rien n'y fait (sous FF3 et IE7)

Voilà mon code CSS :

ul#nav_main {  /* navigation principale */
	height:22px;
	padding:261px 0 0 0;
	position:relative;
	width:850px;
}
ul#nav_main li { font-size:11px; height:22px; line-height:22px; position:absolute; }
li#menu0 { width:157px; z-index:1; }
li#menu1 { left:131px; width:179px; z-index:1; }
li#menu2 { left:285px; width:179px; z-index:1; }
li#menu3 { left:440px; width:179px; z-index:1; }
li#menu0 a { background: transparent url(/NAVPICS/menu/onglet_home_off.png) 0 0 no-repeat; z-index:1; }
li#menu1 a { background: transparent url(/NAVPICS/menu/onglet_rub_off.png) 0 0 no-repeat; z-index:1; }
li#menu2 a { background: transparent url(/NAVPICS/menu/onglet_rub_off.png) 0 0 no-repeat; z-index:1; }
li#menu3 a { background: transparent url(/NAVPICS/menu/onglet_rub_off.png) 0 0 no-repeat; z-index:1; }
ul#nav_main li a { color:#d0fafc; text-align:center; z-index:1; }
li#menu0 a:hover, li#menu0.on a { background:url(/NAVPICS/menu/onglet_home_on.png) 0 0 no-repeat; z-index:999; }
li#menu1 a:hover, li#menu1.on a { background:url(/NAVPICS/menu/onglet_rub_on.png) 0 0 no-repeat; z-index:999; }
li#menu2 a:hover, li#menu2.on a { background:url(/NAVPICS/menu/onglet_rub_on.png) 0 0 no-repeat; z-index:999; }
li#menu3 a:hover, li#menu3.on a { background:url(/NAVPICS/menu/onglet_rub_on.png) 0 0 no-repeat; z-index:999; }

et HTML (c'est sous spip) :

			<ul id="nav_main">
				<li id="menu0" [(#ID_RUBRIQUE|=={0}|?{'class="on"',''})]><a href="#URL_SITE_SPIP">ACCUEIL</a></li>
				<BOUCLE_nav(RUBRIQUES){racine}{id_rubrique==(1|2|3)}{par num titre}>
				[<li id="menu#ID_RUBRIQUE"[ class="(#EXPOSE)"]><a href="#URL_RUBRIQUE">(#TITRE|supprimer_numero|majuscules)</a></li>]
				</BOUCLE_nav>
			</ul>

Merci d'avance pour vos éclaircissements !

KePh

Au cas où ça pourrait aider, je rajouter le code généré :

			<ul id="nav_main">
				<li id="menu0" class="on"><a href="#">ACCUEIL</a></li>
				
				<li id="menu1"><a href="spip.php?rubrique1"><span style='text-transform: uppercase;'>menu 1</span></a></li>
				
				<li id="menu2"><a href="spip.php?rubrique2"><span style='text-transform: uppercase;'>menu 2</span></a></li>
				
				<li id="menu3"><a href="spip.php?rubrique3"><span style='text-transform: uppercase;'>menu 3</span></a></li>
				
			</ul>