je rencontre un problème d'affichage de mes menus déroulants en fonction de la taille de la fenêtre !
pour que les boutons de mon menu et le texte s'adapte en fonction de la taille de la fenêtre, j'ai mis mes boutons en % et mon texte en "em" : cela fonctionne !
par contre, mon menu déroulant est en position absolue par rapport à un point 0 de ma page : tant de pixel du bord gauche, du haut .... par conséquent, quand je réduit ma fenêtre, mon menu déroulant se trouve décalé par rapport à mon menu fixe ! j'ai voulu passer les repères en % mais cela ne fonctionne pas, pour obtenir un menu déroulant de la même largeur que mes boutons de menu fixe, je suis obligé de les mettre à 500% de largeur
Pourriez vous m'aider à résoudre ce problème ?
je vous donne le code css de mon menu et de mon menu déroulant ainsi que le code html de ma page !
voici l'adresse de ma page pour vous faire une idée : http://hlanglois-27.bureauvirtuelscolai ... olaire.fr/
sur cette page, mon menu est encore en pixel et non en %!
Code : Tout sélectionner
#menu li {
color: white;
display: block;
float: left;
text-align: center;
margin-bottom: 0%;
text-transform: capitalize;
margin-left: 1%;
background-color: red;
width: 12%;
font-size: 0.8em;
padding-right: 2px;
padding-left: 2px;
}
ul.navlist {
font-family: sans-serif;
}
ul.navlist a {
font-weight: bold;
text-decoration: none;
}
ul.navlist, ul.navlist ul, ul.navlist li {
margin: 0px;
padding: 0px;
list-style-type: none;
}
ul.navlist li {
float: left;
}
ul.navlist li a {
border: thin solid white;
padding: 0;
display: block;
color: #ffffff;
background-color: red;
}
ul.navlist li a:hover {
color: #ffff00;
background-color: #cc0000;
}
ul.navlist li a:active {
border: 1px inset #ffffff;
color: #cccccc;
background-color: #cc0000;
}
ul.navlist ul {
position: absolute;
font-size: 8pt;
padding-top: 0px;
display: none;
}
ul.navlist ul li {
clear: both;
}
ul.navlist ul li a {
border: thin solid ;
margin: 0px;
padding: 1px;
display: block;
width: 96px;
}
ul.navlist li:hover ul {
display: block;
z-index: 10;
}
ul.navlist li.hover ul {
display: block;
z-index: 10;
margin-top: -8px;
}
Code : Tout sélectionner
<div id="menu">
<ul class="navlist">
<li><a href="#">Rotation avant</a>
<ul style="width: 219px; top: 152px; left: 8px;">
<li><a href="rouladeavant.html">Roulade Avant</a></li>
<li><a href="rouladeavantecart.html">Roulade
Avant
Ecart</a></li>
<li><a href="rouladeavanttendue.html">Roulade
Avant
Tendue</a></li>
<li><a href="rouladeavantelevee.html">Roulade
Avant
Elevée</a></li>
<li><a href="saltoavant.html">Salto Avant</a></li>
</ul>
</li>
<li>
<a href="#">Rotation Arrière</a>
<ul style="width: 260px; top: 152px; left: 123px;">
<li><a href="rouladearriere.html">Roulade
Arrière</a></li>
<li><a href="rouladearriereecart.html">Roulade
Arrière Ecart</a></li>
<li><a href="rouladearrieretendue.html">Roulade
Arrière Tendue</a></li>
<li><a href="rouladearrierepiquee.html">Roulade
Arrière Piquée</a></li>
<li><a href="saltoarriere.html">Salto Arrière</a></li>
</ul>
</li>
<li>
<a href="#">Renversement</a>
<ul style="width: 246px; top: 152px; left: 238px;">
<li><a href="atr.html">ATR (Appui Tendue
Renversé)</a></li>
<li><a href="roue.html">Roue</a></li>
<li><a href="rondade.html">Rondade</a></li>
<li><a href="placementdedos.html">Placement de
dos</a></li>
<li><a href="sautdemain.html">Saut de main</a></li>
<li><a href="fliparriere.html">Flip Arrière</a></li>
</ul>
</li>
<li><a href="enchainement.html">Enchaînement</a>
</li>
<li> <a href="#">saut de cheval</a>
<ul style="width: 246px; top: 152px; left: 468px;">
<li><a href="sautdelune.html">Saut de Lune</a></li>
<li><a href="sautrondade.html">Rondade</a></li>
</ul>
</li>
<li><a href="#">Site
</a>
<ul style="width: 219px; top: 152px; left: 583px;">
<li><a href="index.html">Introduction</a></li>
<li><a href="explication.html">Explication</a></li>
</ul>
</li>
</ul>
</div>
cordialement
andré
