<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>

#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;
}