[Résolu] Menu slider

Quand on est débutant, on bute sur les moindres difficultés. Alors on recherche sur le net des outils tout près, mais quelquefois il manque du code
J’ai repéré 2 menus slider qui fonctionnent à merveille sur le site. Quand on essaie de les réaliser, on s’aperçoit qu’il manque quelque chose. Des chevronnés peuvent ‘ils compléter le code. Voici les liens des 2 menus slider
http://www.css3create.com/Menu-Slides-avec-CSS3
http://www.css3create.com/Menu-avec-slider-effet-transition
en espérant que des menus sliders intéresseront beaucoup de personnes

Quand on est débutant, on peut prendre la peine de commenter l'article d'un chevronné qui propose une ressource gratuite afin de comprendre ce qui nous manque, non ?

Deux options simples : lire les commentaires existants, car il y a de grandes chances qu'un autre débutant ait buté sur la même chose que toi; et inspecter le code source de la démonstration, car l'exemple concret fonctionne très bien. N'importe quel inspecteur de code te permettra de voir s'il y a des choses en plus.

Bonne continuation !

voici le code réalisé
l'affichage est correct mais il subsiste une instabilité au survol du menu
sur la démo du site http://www.css3create.com/Menu-avec-slider-effet-transition , ce problème n'existe pas.
Merci pour votre aide

<div class="menu">
	<ul>
		<li>
			<a href="">Item l</a>
			<div class="texte">
				<p class="textc tv">item 1</br>Bienvenue sur Stop 5</p>									
			</div>
		</li>
		<li>
			<a href="#">Item 2</a>
			<div class="texte">
				<p>item 2
				<a href="#"><p class="bouton">STOP</p></a>
				<a href="#"><p class="bouton">MARTINGALE</p></a>																						
			</div>
		</li>
		<li>
			<a href="#">Item 3</a>
			<div class="texte">item 3</div>
			</li>
		<li>
			<a href="#">Item 4</a>
			<div class="texte">item 4</div>
		</li>		   
		<li>
	 	    <a href="#">Item 5</a>
			<div class="texte">item 5</div>
		</li>
		<li>
			<a href="#">Item 6</a>
			<div class="texte">item 6</div>
		</li> 
		<li>
			<a href="#">Item 7</a>
			<div class="texte">	</div>
			</li> 					  
	</ul>
</div>
			
<div id="logo">
	<p class="triangle-up"></p><p class="triangle-down"></p>
	<p class="textc">Stop</p>
</div>

html,body{background-color: #222;}
.textc{text-align: center;}
.tv{color: #009999;}
.menu{
position: relative;
background-color: #009999;
width: 170px;
height: 327px;
float:left;}
.menu ul {list-style-type: none;
padding-left: 0px;}
.menu ul li:hover {
 padding: 0px 0px;}
.menu ul li a{
width: 120x;
font-size: 24px;
line-height: 150%;
display: block;
margin-left: 0px;
padding-left: 0px;}
.menu ul li a:hover{
background-color: #C8D2DC;
color: #009999;
padding-left: 0px;}
.menu ul li div{
background-color: #C8D2DC;
padding: 0px 20px;
left:0px;opacity:0;width: 0px;
transition:2s left,2s width,2s opacity;}
.menu ul li:hover div{
left:170px;opacity:1;
width:375px; 
transition:2s left,2s width,2s opacity;}	
#logo{
position: relative;
width: 413px;
padding-top: 30px;
height: 285px;
float:left;
color: #C8D2DC;}
.texte{position:absolute;
top: 16px;
left:350px;
font-size: 20px;
color: #000;
width: 318px;
height: 294px;
z-index:1;}
a{
color: #fff;
text-decoration : none;}
.triangle-up{
width: 0px;
height: 0px;
border-left: 36px solid transparent;
border-right: 36px solid transparent;
border-bottom: 54px solid #009999;
margin: 0px auto;}	
.triangle-down{
width: 0px;
height: 0px;
border-left: 36px solid transparent;
border-right: 36px solid transparent;
border-top: 54px solid #D64B00;
margin: 3px auto 0px auto;}
.bouton{
width: 120px;
float: left;
padding: 5px 8px;
margin-left: 35px;
margin-bottom: 15px;
text-align: center;
display: inline-block;
font-size: 18px;
color: #fff;
background-color: #009999;}

Modifié par 6l20 (06 Sep 2013 - 18:00)

Hello,

Des soucis de positionnement et de dimensionnement entre autre chose.
Comparez votre code à celui de Vincent, tentez de comprendre ce qu'il essaie de faire et ce qu'il met en œuvre pour y parvenir

merci problème résolu