Bonjour,
et merci pour la réponse.
Comme c'est le navigateur qui fixe les barres de défilement, je comprends qu'il n'y a pas grand chose à faire pour enlever cette barre disgracieuse et trop longue. J'ai lu l'article de ton lien. C'est intéressant, mais si je fais disparaître la barre de défilement, le visiteur ne saura plus qu'il y a un défilement possible sur le menu, et à priori ne s'en servira pas. Et pas question de compter sur un module complémentaire comme "Hide Scrollbars". C'est une décision du visiteur, donc une contrainte pour lui. De plus, qu'en serait-il sur des tablettes ?
Je vais laisser en l'état pour le moment. Ça fonctionne très bien en mode résolution portable, avec un menu déroulant, qui se "promène" avec le texte.
A propos, quand on applique le overflow:auto; sur le li d'un menu déroulant, celui-ci ne se déroule plus, il prend une barre de défilement horizontale et verticale, et les liens du menu défilent à l'intérieur de la div, c'est à dire dans une petite fenêtre. J'ai trouvé ça par hasard, en testant différentes options, mais ça pourrait être exploité dans d'autres situations. Je ne peux pas mettre un exemple en ligne, je donne juste le css ici.
@media all and (max-width: 480px){
.monmenu{
position:fixed;
top:2%;
left:.8em;
z-index:100;
display:block;
width:22%;
}
*{
font-family:'PolicePerso', serif;
font-size:14px;
}
li{
position:relative;overflow:auto; /* C'est ici...*/
top:110px;
display:block;
margin:0;
width:130%;
-webkit-transition:1000ms;
-o-transition:1000ms;
transition:1000ms;
background:rgba(255,255,0,0);
}
li a{
background-image:-moz-repeating-radial-gradient(gray, #fafad2);
-webkit-repeating-radial-gradient(gray, #fafad2);
repeating-radial-gradient(gray, #fafad2);
display:block;
padding:4px 12px;
font-size:1.2em;
text-decoration: none;
}
li:hover > a{
background:#333;
-webkit-transition: all 5s;
-o-transition: all 5s;
transition: all 5s;
}
li ul{
position:relative;
top:35px;
left:0;
display:none;
padding:0;
-webkit-transition: all 2.2s;
-o-transition: all 2.2s;
transition: all 2.2s;
}
li:hover > ul{
position:absolute;
top:-6em;
display:inline;
}
li ul li{
display:block;
width:200px;
background-color: grey;
border-right:0;
border-top:1px solid #fff;
}
}
.nav{
color:black;font-size:1.2em;}