Menu avec portes coulissantes

Bonjour,

Je suis débutante et j'espère pouvoir compter sur votre aide !
J'ai essayé le système des portes coulissantes selon le livre de Raphaël Goetter. Le meilleur système jusqu'à présent est le suivant, mais je ne parviens pas à faire "coulisser" comme il faut... J'apprécierais grandement de l'aide en la matière !
L'image mise en fond de div fait 120px de large sur 600px de haut (300 de fond noir, 300 de fond orange). Pour l'instant, le passage de la souris fait apparaît le bas de l'image, quelque soit l'onglet sur lequel je passe la souris.
Mon code html :

	<div id="menu_vert">
		<ul>
			<li> <a id="lien1" title="accueil du site" accesskey="1" href="http://www.institut-bellissima.be/index.html" > accueil</a> </li> 
			<li> <a href="http://www.institut-bellissima.be/soins.html" id="lien2"> soins</a> </li> 
			<li> <a href="http://www.institut-bellissima.be/votre_page.html"id="lien3">votre page </a> </li> 
			<li> <a href="http://www.institut-bellissima.be/produits.html" id="lien4"> produits</a></li>
			<li> <a href="http://www.institut-bellissima.be/banc_solaire.html"id="lien5"> banc solaire</a> </li> 
			<li> <a href="http://www.institut-bellissima.be/liste_prix1.pdf"id="lien6"> liste des prix</a> </li> 
  		</ul>
   </div>

Mon code CSS :

#menu_vert{
top:200px;
left:5%;
height:300px;
width:120px;
background:transparent url(img/bell_menu_princ.png) top left no-repeat;
}

#menu_vert ul{
position:absolute;
}

#menu_vert li{
display:inline; /*correction pour IE5*/
}

#menu_vert a{
display:block;
height:50px;
width:120px;
line-height:50px;
text-indent:1000px;
overflow:hidden;
}

#lien1 a, a:hover, a:active{
background-position:0 -150px;
}

#lien2 a, a:hover, a:active{
background-position:0 -350px;
}

#lien3 a, a:hover, a:active{
background-position:0 -400px;
}

#lien4 a, a:hover, a:active{
background-position:0 -450px;
}

#lien5 a, a:hover, a:active{
background-position:0 -500px;
}

#lien6 a, a:hover, a:active{
background-position:0 -550px;
}

Merci d'avance pour votre aide, qui m'évitera de m'arracher les derniers cheveux qui me restent sur le caillou!

Modifié par afsom (14 Nov 2009 - 12:23)

Hello afsom et bienvenue ,

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace après le crochet ouvrant).



Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je te rappelle que l'Aide (dont le lien est fourni lors de l'inscription) contient des pistes de recherche, des indications sur les règles de vie de la co