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
Message édité par ritalou le 19-11-2013 à 14:17:21