Bonsoir à la communauté du site du Zéro,
J'ai un petit soucis pour réaliser mon site internet, je débute avec le langage CSS et j'ai beaucoup de difficultés à créer un beau menu déroulant en CSS, j'espère que vous pourrez m'aider.


Mon premier problème est que les sous listes de mon menu sont légèrement décalé sur la droite.
Mon deuxième problème et que j'aimerais que tous les fonds des différentes listes de mon menu aient la même taille, (je ne comprends pas ce que je dois changer dans le code)
Et le dernier block ne se place pas correctement!
Autant vous dire qu'il y a encore du boulot !!!

<!-- LE MENU HORIZONTAL -->
<div id="menu">
<ul>
  <li><a href="index.html"
 title="Retour au Menu principal">Accueil</a></li>
  <li><a href="#"
 title="l'équipe">Qui sommes nous</a>
    <ul>
      <li>
        <a href="#">sous titre 1</a>
      </li>
      <li>
        <a href="#">sous titre 2</a>
      </li>
      <li>
        <a href="#">sous titre 3</a>
      </li>
    </ul>
  </li>
  <li><a href="formations.html"
 title="Des formations à la carte">Catalogues des formations</a>
    <ul>
      <li>
        <a href="#">Formules</a>
      </li>
      <li>
        <a href="#">Modèles</a>
      </li>
    </ul>
  </li>
  <li><a href="#" title="la documentation">Documentation</a>
    <ul>
      <li>
        <a href="#">Catalogue des formations</a>
      </li>
      <li>
        <a href="#">Plaquette</a>
      </li>
      <li>
        <a href="#">Bulletin d'inscription</a>
      </li>
    </ul>
  </li>
  <li><a href="contact.html" title="Nous contacter">Nous
Contacter</a></li>
</ul>
</div>

/* ICI LE MENU HORIZONTAL */
#menu
{
	font-family: Arial, Georgia, Verdana, serif;
    font-size: 12px;
    background-color: rgb(153,153,153);
    margin: 0px;
    color: white;
    font-weight: bold;
    padding: 10px;
    width: 800px;
	heidht: 150px;
   }

#menu ul {
 margin:0px;
 padding:0px;
 list-style-type: none;
 text-align:center; /* ne comprends pas ce que ça modifie */
 }
#menu li {
 float:left;  
 margin:auto;
 padding:10px;
 background-color: rgb(153,153,153);
 }
#menu li a {
 display: block;
 width:120px;
 color:white;
 text-decoration:none;
 padding:5px;
 }
#menu li a:hover {
 color:rgb(190,38,135);  }
#menu ul li ul {
 display:none; 
 }
 #menu ul li:hover ul {
 display:block;
 }
#menu li:hover ul li {
 float:none;
 }
 
 #menu li ul {
 position:absolute;
 }

D'avance merci pour tous vos conseils...

bonsoir,

tu as fait une erreur dans ton css , une erreur de frappe !

heidht: 150px;

---> cela devrait être

height: 50px;

je pense que cela corrige déjà pas mal, regarde

Merci pour ton message,

J'ai changé cette donnée mais il n'y a rien qui change lorsque je test ma page. Bizarre non?

pom pom pom ♫

J'ai galéré sur le même problème, et le tuto de toinouze est très bien fait

#menu
{
	font-family: Arial, Georgia, Verdana, serif;
    font-size: 12px;
    background-color: rgb(153,153,153);
    margin: 0px;
    color: white;
    font-weight: bold;
    padding: 10px;
    width: 800px;
	height: 150px;
   }

#menu ul {
 margin:0px;
 padding:0px;
 list-style-type: none;
 text-align:center; /* Aligne tous les textes */
 }
#menu li {
 float:left;  
 margin:auto;
 background-color: red/*rgb(153,153,153)*/;
 }
 
#menu li a {
 display: block;
 width:120px;
 color:white;
 text-decoration:none;
 padding:15px;
 }
#menu ul .menu_li_bis {padding:8px 15px 7px}
#menu li a:hover {
 color:rgb(190,38,135);  }
#menu ul li ul {
 display:none; 
 }
 #menu ul li:hover ul {
 display:block;
 }
#menu li:hover ul li {
 float:none;
 }
 
 #menu li ul {
 position:absolute;
 }

<div id="menu">
<ul>
  <li><a href="index.html"
 title="Retour au Menu principal">Accueil</a></li>
  <li><a href="#"
 title="l'équipe">Qui sommes nous</a>
    <ul>
      <li>
        <a href="#">sous titre 1</a>
      </li>
      <li>
        <a href="#">sous titre 2</a>
      </li>
      <li>
        <a href="#">sous titre 3</a>
      </li>
    </ul>
  </li>
  <li><a href="formations.html"
 title="Des formations à la carte" class="menu_li_bis">Catalogues des formations</a>
    <ul>
      <li>
        <a href="#">Formules</a>
      </li>
      <li>
        <a href="#">Modèles</a>
      </li>
    </ul>
  </li>
  <li><a href="#" title="la documentation">Documentation</a>
    <ul>
      <li>
        <a href="#">Catalogue des formations</a>
      </li>
      <li>
        <a href="#">Plaquette</a>
      </li>
      <li>
        <a href="#">Bulletin d'inscription</a>
      </li>
    </ul>
  </li>
  <li><a href="contact.html" title="Nous contacter">Nous
Contacter</a></li>
</ul>
</div>

J'ai ajouté une class pour le long titre de menu auquel j'ai ajusté les padding pour qu'il ait la même hauteur que les autres. D'ailleurs, j'ai appliqué le padding aux liens et non aux li, ce qui provoquait le décalage à droite des sous-menus.

Merci beaucoup,
C'est exactement ce que je voulais!!!