Problème de décalage

[theprogrammeur]

Bonjour

J'ai voulu faire un menu avec des décalements horizontal et j'ai un petit problème de décalage. Voici tout d'abord le code HTML:

<li class="end first"><a href="index.php">Home</a></li>
				  <li class="extend">
				   <a href="index2.php">RUBRIQUE1</a>
				   <ul>
					  <li class="end first">
					  <a href="page1.php">Page1</a></li>
			  <li class="end"><a href="page2.php">page2</a></li>
						  <li class="end"><a href="page3.php">page3</a></li>
						  <li class="end"><a href="page4.php">page4</a></li>
			  <li class="end last">
						  <a href="page5.php">page5</a></li>
				   </ul>
				   <!--Fin du sous-menu-->
				</li>
				<li class="extend">
				   <a href="index3.php">RUBRIQUE2</a>
				   <ul>
					  <li class="end first">
						<a href="pagex1.php">Pragex1</a></li>
							<li class="end"><a href="pagex2.php">pagex2</a></li>
								<li class="end"><a href="pagex3.php">pagex4</a></li>
								<li class="end last">
								<li class="end"><a href="pagex4.php">pagex4</a></li>
				   </ul>
				   <!--Fin du sous-menu-->
				 </li>
</ul>

Et voici le code CSS qui lui est attribué:

#menu_dynamique li a {
  display:block;
  height:23px;
  text-decoration:none;
  color:#696969;
  background-color:#FFFFFF;
}
#menu_dynamique {
margin-right:1%;
margin-left:5px;
width:24%;
padding-left:0px;
float:left;
}
#menu_dynamique ul {
  list-style:none;
  padding:0px;
  margin:0px;
  border-right:1px solid silver;
}
#menu_dynamique ul li {
  margin-left:5px;
  padding-left:25px;
  text-indent:5px;
  height:23px;
  background:url("bordure.png") no-repeat;
}
#menu_dynamique ul li ul {
  display:none;
}
#menu_dynamique ul li:hover ul {
  display:block;
  position:relative;
  top:-24px;
  left:315px;
}
#menu_dynamique ul li ul, #menu_dynamique ul li:hover ul li ul, #menu_dynamique ul li:hover ul li:hover ul li ul{
  display:none;
}
#menu_dynamique ul li:hover ul, #menu_dynamique ul li:hover ul li:hover ul, #menu_dynamique ul li:hover ul li:hover ul li:hover ul{
  display:block;
  position:relative;
  top:-24px;
  left:210px;
}
#menu_dynamique ul li.extend a {
  background:white url("suite.gif") right no-repeat;
}
#menu_dynamique ul li.extend:hover ul li.end a {
  background-image:none;
}
#menu_dynamique li:hover {
  background:url("fleche_survol.png") no-repeat;
}
#menu_dynamique li a:hover {
  color:black;
  background-color:#BBB7C7;
}
#menu_dynamique ul li.extend:hover a, #menu_dynamique ul li.extend:hover ul li:hover a, #menu_dynamique ul li.extend:hover ul li.extend:hover ul li:hover a{
  background-color:#BBB7C7;
}
#menu_dynamique ul li.extend:hover ul li a, #menu_dynamique ul li.extend:hover ul li:hover ul li a, #menu_dynamique ul li.extend:hover ul li.extend:hover ul li:hover ul li a{
  background-color:#FFFFFF;
}
#menu_dynamique li.first{
  border-top:1px solid silver;
}
#menu_dynamique li.last{
  border-bottom:1px solid silver;
}
#menu_dynamique ul li.extend:hover {
  width:211px;
  height:23px;
  overflow:hidden;
}
html > body #menu_dynamique ul li.extend:hover {
  overflow:visible;
}

Mon problème est que la sous-rubrique de la RUBRIQUE1 apparait normalement mais la sous-rubrique de la RUBRIQUE2 fait rétrécir un peu le corps du menu. J'ai longtemps cherché dans le code mais je ne vois pas l'erreur.

Pouvez-vous m'aider?

Merci d'avance.