Décalage au clic

Bonjour,

J'ai créé un menu déroulant pour mon site. Je rencontre un petit problème : lorsque que je clique sur un bouton du menu, le bouton en question se décale légèrement sur la droite et revient à sa place d'origine. Et lors du clic, les boutons qui suivent se décalent également. Cependant je ne vois pas où est l'erreur.
Voici mon code html

<div id="menuderoulant">
<ul id="menu">
  <li><a href="#">Item 1</a></li>
		<li><a href="#">Item 2</a>
    		<ul class="sousmenu">
		    	<li><a href="#">Sous-item 1</a></li>
		    	<li><a href="#">Sous-item 2</a></li>
		    	<li><a href="#">Sous-item 3</a></li>
		    	<li><a href="#">Sous-item 3</a></li>
		    	<li><a href="#">Sous-item 4</a></li>    	      	
    		</ul>
        </li>
       <li><a href="#">Item 3</a>
<ul class="sousmenu">
		    	<li><a href="#">Sous-item 1</a></li>
		    	<li><a href="#">Sous-item 2</a></li>
		    	<li><a href="#">Sous-item 3</a></li>
		    	<li><a href="#">Sous-item 3</a></li>
		    	<li><a href="#">Sous-item 4</a></li> 
   	     </ul>
	 </li>        
    <li><a href="h#">Item 4</a></li>
       <li><a href="#">Item 5</a></li>
       <li><a href="#">Item 6</a></li>
  </ul>
</div>

Et la partie CSS

#menuderoulant {height:30px;}
	
#menu, #menu ul 
        padding : 0;
        list-style : none; 
        line-height : 33px; 
        text-align : center;}

#menu 
	{
		font-family:"Trebuchet MS"; 
        font-size : 13px;
	}
	
#menu a 
{
        display : block; 
        padding : 0; 
		margin:0;
		background-image:url(images/bt/bt_menu1.jpg);      
        color:#FFF; 
        text-decoration:none; 
  		width:158px;
}

#menu li 
{ 
        float : left;
		border-right : 1px solid #fff; 
}

html>body #menu li
{
        border-right: 1px solid transparent; 
}

#menu li ul 
{ 
        position: absolute;
		width:158px; 
        left: -999em; 
}

#menu li ul li /* Éléments de sous-listes */
{
        border-top : 0px solid #fff; 
}

html>body #menu li ul li                
{
        border-top : 0px solid transparent; 
}

#menu li ul ul 
{
        margin: -22px 0 0 124px ;
	border-left: 1px solid #fff ; }

html>body #menu li ul ul                
{
        border-left: 1px solid #fff ; 
}

#menu a:hover   
	{
		width:158px;
        background-image:url(images/bt/bt_menu2.jpg);
	}

#menu li:hover ul ul, #menu li.sfhover ul ul 
	{
        left: -999em; 
	}

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul  
	{
        left: auto; 
        min-height: 0; 
	}

Merci d'avance pour vos réponses

Bonjour,

J' ai fait l'autre jour un menu déroulant. Je pense avoir vu une erreur dans ton code Css:

#menu li ul ul

Pour moi cette configuration n'existe pas dans ton html.

Pour faire mon menu j'étais allé voir ça:

http://www.tuto-fr.com/tutoriaux/tutorial-menu-deroulant-css.php

Bon courage.
Modifié par touchenuage (04 Feb 2011 - 21:56)

Bonjour,

Oui effectivement, j'avais supprimé des sous-items et j'ai oublié de retirer cette partie là. Cependant, j'ai toujours ce décalage des boutons au clic