CSS: Pb de menu horizontal
jakkihm
Messages postés
141
Statut
Membre
-
Candygril Messages postés 7 Statut Membre -
Candygril Messages postés 7 Statut Membre -
Salut !
Je ne parviens pas à afficher les sous-menus du menu horizontal suivant:
Il paraît que cela est dû à ma dernière ligne dans le CSS. Si cela est juste, comment puis-je corriger ce pb ?
CSS:
HTML:
Merci beaucoup à tous !
Je ne parviens pas à afficher les sous-menus du menu horizontal suivant:
Il paraît que cela est dû à ma dernière ligne dans le CSS. Si cela est juste, comment puis-je corriger ce pb ?
CSS:
#menuDeroulant
{
background: #6A6458;
height: 21px;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}
#menuDeroulant li
{
float: left;
width: 120px;
margin: 0;
padding: 0;
border: 0;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
display: block;
height: auto;
color: #FFF;
background: #3B4E77;
margin: 0;
padding: 4px 8px;
border-right: 1px solid #fff;
text-decoration: none;
}
#menuDeroulant li a:hover { background-color: #F2462E; }
#menuDeroulant li a:active { background-color: #5F879D; }
#menuDeroulant .sousMenu
{
display: none;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}
#menuDeroulant .sousMenu li
{
float: none;
margin: 0;
padding: 0;
border: 0;
width: 149px;
border-top: 1px solid transparent;
border-right: 1px solid transparent;
}
#menuDeroulant .sousMenu li a:link, #menuDeroulant .sousMenu li a:visited
{
display: block;
color: #FFF;
margin: 0;
border: 0;
text-decoration: none;
}
#menuDeroulant .sousMenu li a:hover
{
background-image: none;
background-color: #F2462E;
}
#menuDeroulant li:hover .sousMenu { display: block; }
HTML:
<ul id="menuDeroulant"> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <ul class="sousMenu"> <li><a href="#">s-menu1</a></li> <li><a href="#">s-menu2</a></li> <li><a href="#">s-menu3</a></li> <li><a href="#">s-menu4</a></li> </ul> <li><a href="#">Menu 3</a></li> <ul class="sousMenu"> <li><a href="#">s-menu1</a></li> <li><a href="#">s-menu2</a></li> <li><a href="#">s-menu3</a></li> </ul> <li><a href="#">Menu 4</a></li> </ul>
Merci beaucoup à tous !
A voir également:
- CSS: Pb de menu horizontal
- Css download - Télécharger - HTML
- Enlever soulignement lien css ✓ - Forum CSS
- Enlever le soulignement d'un lien css ✓ - Forum Réseaux sociaux
- Css ligne horizontale ✓ - Forum CSS
- Enlever le soulignage des lien. - Forum CSS
1 réponse
Hello,
La structure de ton html est incorrecte. La liste comportant le sous-menu doit être à l'intérieur du li:
La structure de ton html est incorrecte. La liste comportant le sous-menu doit être à l'intérieur du li:
<ul id="menuDeroulant">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a>
<ul class="sousMenu">
<li><a href="#">s-menu1</a></li>
<li><a href="#">s-menu2</a></li>
<li><a href="#">s-menu3</a></li>
<li><a href="#">s-menu4</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a>
<ul class="sousMenu">
<li><a href="#">s-menu1</a></li>
<li><a href="#">s-menu2</a></li>
<li><a href="#">s-menu3</a></li>
</ul>
</li>
<li><a href="#">Menu 4</a></li>
</ul>
