A voir également:
- Problème décalage des block du menu
- Menu déroulant excel - Guide
- Menu démarrer windows 11 - Guide
- Décalage son image youtube ✓ - Forum YouTube
- Menu contextuel windows 11 - Guide
- Ad block - Télécharger - Outils pour navigateurs
4 réponses
Bonjour,
Les dimensions des blocs sont données en valeur fixe (pixel) ou en valeur relative (%, em) ?
Quand se pose un tel problème, le mieux c'est de joindre le code (extrait) HTML/CSS qui pose souci, dans ton cas le menu horizontal :-)
@+
Les dimensions des blocs sont données en valeur fixe (pixel) ou en valeur relative (%, em) ?
Quand se pose un tel problème, le mieux c'est de joindre le code (extrait) HTML/CSS qui pose souci, dans ton cas le menu horizontal :-)
@+
Bonjour, merci d'avoir répondu.
Voici mon code HTML:
<!-- Menu -->
<div id="menu2">
<ul id="menu">
<li>
<a href="xxx">xxx</a>
</li>
<li>
<a href="">xxx</a>
<ul>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
</ul>
</li>
<li>
<a href="">xxx</a>
<ul>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
</ul>
</li>
<li>
<a href="">xxx</a>
<ul>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
</ul>
</li>
<li>
<a href="">xxx</a>
<ul>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
</ul>
</li>
<li>
<a href="">xxx</a>
<ul>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
</ul>
</li>
<li>
<a href="">xxx</a>
<ul>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
</ul>
</li>
<li>
<a href="">xxx</a>
<ul>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
</ul>
</li>
</div>
Et mon code CSS
/* menu */
#menu2
{
width: 1024px;
height: 40px;
position: absolute;
margin-left: 0px;
margin-top: 350px;
/*border: 1px solid black;*/
}
#menu, #menu ul /* Liste */
{
padding : 0;
margin : 0;
list-style : none;
line-height : 40px;
text-align : center;
}
#menu /* Ensemble du menu */
{
font-weight : bold;
font-family : Arial;
font-size : 12px;
}
#menu a /* Contenu des listes */
{
display : block;
padding : 0;
background : #c3c3c2;
color : #000;
text-decoration : none;
width : 144px;
}
#menu li /* Elements des listes */
{
float : left;
border : 1px solid #000;
}
#menu li ul /* Sous-listes */
{
position: absolute; /
width: 144px;
left: -999em;
}
#menu li ul li /* Éléments de sous-listes */
{
border : 1px solid #000;
}
#menu li ul ul
{
margin : -41px 0 0 99px ;
border : 1px solid #fff ;
}
#menu a:hover
{
color: #000;
background: #f0f5f0;
}
#menu li:hover ul ul, #menu li.sfhover ul ul
{
left: -999em;
}
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul
{
left: auto;
min-height: 0;
}
Voici mon code HTML:
<!-- Menu -->
<div id="menu2">
<ul id="menu">
<li>
<a href="xxx">xxx</a>
</li>
<li>
<a href="">xxx</a>
<ul>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
</ul>
</li>
<li>
<a href="">xxx</a>
<ul>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
</ul>
</li>
<li>
<a href="">xxx</a>
<ul>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
</ul>
</li>
<li>
<a href="">xxx</a>
<ul>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
</ul>
</li>
<li>
<a href="">xxx</a>
<ul>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
</ul>
</li>
<li>
<a href="">xxx</a>
<ul>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
</ul>
</li>
<li>
<a href="">xxx</a>
<ul>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
</ul>
</li>
</div>
Et mon code CSS
/* menu */
#menu2
{
width: 1024px;
height: 40px;
position: absolute;
margin-left: 0px;
margin-top: 350px;
/*border: 1px solid black;*/
}
#menu, #menu ul /* Liste */
{
padding : 0;
margin : 0;
list-style : none;
line-height : 40px;
text-align : center;
}
#menu /* Ensemble du menu */
{
font-weight : bold;
font-family : Arial;
font-size : 12px;
}
#menu a /* Contenu des listes */
{
display : block;
padding : 0;
background : #c3c3c2;
color : #000;
text-decoration : none;
width : 144px;
}
#menu li /* Elements des listes */
{
float : left;
border : 1px solid #000;
}
#menu li ul /* Sous-listes */
{
position: absolute; /
width: 144px;
left: -999em;
}
#menu li ul li /* Éléments de sous-listes */
{
border : 1px solid #000;
}
#menu li ul ul
{
margin : -41px 0 0 99px ;
border : 1px solid #fff ;
}
#menu a:hover
{
color: #000;
background: #f0f5f0;
}
#menu li:hover ul ul, #menu li.sfhover ul ul
{
left: -999em;
}
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul
{
left: auto;
min-height: 0;
}