Mes z-index ne marche pas !

Bonjour à tous.

Je réalise une maquette pour le club équestre de ma ville. Pour ce faire je me suis partis du framwork 960gs sur 5 colonnes, avec dans l'idée de faire apparaitre le sous-menu sur les case numéroté.

Pour le script je l'ai récupérer sur internet, il fonctionne correctement. J'ai donc associé ce script à ma maquette mai apparemment sa ne fonctionne pas.

Je pense que cela viens de mes z-index.

Mais en fait je suis un perdu.

Voilà le code en question :

<script type="text/javascript">
	toto = {
		show: function(elem) {
			document.getElementById(elem).style.visibility = 'visible';
		},
		hide: function(elem) {
			document.getElementById(elem).style.visibility = 'hidden';
		}
	}
</script>

Et la partie du code html :

<div id="le-club" class="grid_1 alpha omega ">
	<img src="images/06.png" alt="numero_menu" />
	
	<h2 class="titre-accueil">
	<a accesskey="1" href="#" onMouseOver="toto.show('s-menu')" onMouseOut="toto.hide('s-menu')">le club.</a></h2>
		<div id="s-menu">
		<ul>
		<li onMouseOver="toto.show('div1')" onMouseOut="toto.hide('div1')">lien 1</li>
		<li onMouseOver="toto.show('div2')" onMouseOut="toto.hide('div2')">lien 2</li>
		<li onMouseOver="toto.show('div3')" onMouseOut="toto.hide('div3')">lien 3</li>
		</ul>
		</div>
	</div>

Pour le CSS il y a plusieurs fichiers mais pour la partie en question j'ai sa :

<style type="text/css">
	#s-menu {visibility:hidden; z-index:2;}
	#le-club { z-index:0;}
</style>

Je vous place le lien vers la maquette en ligne pour mieux vous rendre compte.

Un grand merci à vous.

Bonjour,

tu peux consulter Comment fonctionne la propriété CSS z-index ? dont l'obligation de positionner ces éléments.

Merci pour le lien.

J'ai suivis la méthode, sa marche les z-index maintenant. mon erreur était de mettre 0 et 1. qui apparemment ne fonctionne pas. donc 2 et 1 fonctionne mieux.

Mais la ou je pèche c'est pour le décalage de la div s-menu sur la div le-club.


Je fait plusieurs essais mais elle ne veut pas bougé.