Bonjour,
 
Je crée un site de test en vue de le mettre en ligne prochainement.
 
J'utilise CSS pour créer le menu mais celui-ci bouge lorsque la résolution de l'écran change ou lors d'un zoom dans le navigateur
J'aimerai que le menu reste fixe mais je ne sais quelle ligne ajouter au code
 
Etant grand débutant pour le CSS, j'ai pris le code sur un forum. le voici :
 
#menu, #menu ul{
padding:0;
margin:0;
list-style:none;
text-align:center;
}
#menu li{
display:inline-block;
position:relative;
border-radius:8px 8px 0 0;
}
#menu ul li{
display:inherit;
border-radius:0;
}
#menu ul li:hover{
border-radius:0;
}
#menu ul li:last-child{
border-radius:0 0 8px 8px;
}
#menu ul{
position:absolute;
max-height:0;
width:100%;
overflow:hidden;
-moz-transition: .8s all .3s;
-webkit-transition: .8s all .3s;
transition: .8s all .3s;
}
#menu li:hover ul{
max-height:15em;
}
/* background des liens menus */
#menu li:first-child{
background-color: #A53E25;
}
#menu li:nth-child(2){
background-color: #A53E25;
}
#menu li:nth-child(3){
background-color: #A53E25;
}
#menu li:last-child{
background-color: #A53E25;
}
/* background des liens sous menus */
#menu li:first-child li{
background:#2A2333;
}
#menu li:nth-child(2) li{
background:#333A40;
}
#menu li:nth-child(3) li{
background:#9F391A;
}
#menu li:last-child li{
background:#677F35;
}
/* background des liens menus et sous menus au survol */
#menu li:first-child:hover, #menu li:first-child li:hover{
background:#A53E25;
}
#menu li:nth-child(2):hover, #menu li:nth-child(2) li:hover{
background:#A53E25;
}
#menu li:nth-child(3):hover, #menu li:nth-child(3) li:hover{
background:#A53E25;
}
#menu li:last-child:hover, #menu li:last-child li:hover{
background:#A53E25;
}
/* les a href */
#menu a{
text-decoration:none;
display:block;
padding:8px 32px;
color:#fff;
font-family:arial;
}
#menu ul a{
padding:8px 0;
}
#menu li:hover li a{
color:#fff;
text-transform:inherit;
}
#menu li:hover a, #menu li li:hover a{
color:#000;
}
.auto-style1 {
 font-family: Arial;
 font-size: large;
}
.auto-style2 {
 margin-top: 0px;
}
 
Et voici le code HTML correspondant au menu :
<ul id="menu">
 <li style="left: -145px; top: 125px" class="auto-style2"><a href="#">Les prestations</a>
  <ul>
   <li><a href="#"></a></li>
   <li><a href="#"></a></li>
   <li><a href="#"></a></li>
  </ul>
 </li>
 <li style="left: -154px; top: 125px"><a href="#">Commander</a>
 <ul>
  <li><a href="#"></a></li>
  <li><a href="#"></a></li>
  <li><a href="#"></a></li>
 </ul>
 </li>
 <li style="left: -162px; top: 125px"><a href="contact.html">Contact</a> </li>
</ul>
 
Par avance merci pour votre aide

Première question :
 
Pourquoi mettre du CSS dans le HTML et dans un fichier à part?
 
Autant tout mettre dans le fichier .css
 
2ème point :
 
Je n'est vu aucune taille pour ton menu, si tu ne lui défini pas de taille forcement ça va partir en sucette, sois tu lui défini une taille en % ( ça bougera au zoom ) soit en px, la ça ne bougera pas

merci pour ta réponse.
 
mais comment fait-on pour intégrer le CSS qui se trouve dans le HTML
dans le fichier à part?
 
et je ne sais pas non plus où mettre la valeur "taille" du menu

Re,
 
En créant une classe pour chaque nouveau ul
 
html :

 
css :
 
tu ajoute ça  
 

 
Et tu doit mettre la taille de ton menu dans #menu