Menu CSS hauteur menu principal plus haut que sous listes
mika5490
Messages postés
8
Statut
Membre
-
Sugel Messages postés 4293 Date d'inscription Statut Membre Dernière intervention -
Sugel Messages postés 4293 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je ne trouve pas l'astuce pour que dans un menu CSS, la ligne du haut qui contient les différents menu soit plus haute que les sous listes.
Pouvez-vous m'aider ?
Merci d'avance
Je ne trouve pas l'astuce pour que dans un menu CSS, la ligne du haut qui contient les différents menu soit plus haute que les sous listes.
Pouvez-vous m'aider ?
Merci d'avance
A voir également:
- Menu CSS hauteur menu principal plus haut que sous listes
- Menu déroulant excel - Guide
- Menu démarrer windows 11 - Guide
- Menu recovery samsung - Guide
- Menu démarrer windows 10 - Guide
- Télécharger gratuitement canon quick menu - Télécharger - Utilitaires
7 réponses
salut, je te conseil ce site; c'est du bon matos :
http://css.mammouthland.net/menu-horizontal-deroulant-en-css.php
http://css.mammouthland.net/menu-horizontal-deroulant-en-css.php
salut, je t'avoue secrètement que je fais souvent des menu déroulant et que voilà je pompe ce code.Tu pourrais t'en inspirer aussi. Il fonctionne à merveille sur beaucoup de navigateur.
Si ton problème est autre , c'est que je n'ai pas compris et je regarderai demain.
Donne nous un bout de code à nous mettre sous la dent.
je te souhaite une bonne soirée
Si ton problème est autre , c'est que je n'ai pas compris et je regarderai demain.
Donne nous un bout de code à nous mettre sous la dent.
je te souhaite une bonne soirée
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Bonjour,
Merci, j'ai rajouté ces lignes mais ca ne fonctionne pas.
Est ce que ce code que j'ai deja dans mon tableau peut créer un conflit ?
line-height ?
Merci
#menu, #menu ul
{
padding : 0;
margin : 0;
list-style : none;
line-height : 50px;
Merci, j'ai rajouté ces lignes mais ca ne fonctionne pas.
Est ce que ce code que j'ai deja dans mon tableau peut créer un conflit ?
line-height ?
Merci
#menu, #menu ul
{
padding : 0;
margin : 0;
list-style : none;
line-height : 50px;
Hé bien je ne connais pas le code de tes éléments, j'ai fait un exemple pour cette page:
http://css.mammouthland.net/menu_horizontal_deroulant.html
Tu peut me passer le bout de code html de ton menu ?
http://css.mammouthland.net/menu_horizontal_deroulant.html
Tu peut me passer le bout de code html de ton menu ?
Bonjour,
voici une partie du code html, j'ai plusieurs une liste principale et pas mal de sous liste.
<ul id="menu">
<li>
<a href="#" class="lien1">Composants</a>
<ul>
<li><a href="#">test1</a></li>
<li><a href="#">test2</a></li>
<li><a href="#">nous contacter</a></li>
<li><a href="#">team</a></li>
<li><a href="#">recherche</a></li>
</ul>
</li>
</ul>
mon CSS
#menu, #menu ul
{
padding : 0;
margin : 0;
list-style : none;
line-height : 50px;
text-align : center;
}
#menu
{
font-weight : bold;
font-family : Calibri;
font-size : 12px;
}
#menu a
{
display : block;
padding : 0;
background-color:#000;
text-decoration : none;
width : 150px;
}
#menu li
{
float : left;
border-right : 1px solid #fff;
line-height:200 px;
}
html>body #menu li
{
border-right: 1px solid transparent ;
}
#menu li ul
{
position: absolute;
width: 144px;
left: -999em;
}
#menu li ul li
{
border-top : 1px solid #000;
}
html>body #menu li ul li
{
border-top : 1px solid transparent;
}
#menu li ul ul
{
margin : -22px 0 0 144px ;
border-left : 1px solid #fff ;
}
html>body #menu li ul ul
{
border-left : 1px solid transparent ;
}
#menu li:hover ul ul, #menu li.sfhover ul ul /
{
left: -999em;
#menu li {height:50px;}
#menu ul:first-child > li a, #menu ul:first-child > li {height:100px }
#menu li a {padding-bottom:0px }
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul
{
left: auto;
min-height: 0;
}
.lien1{
color:#FFF;
background-image:url(img/mazoutblack2.png);
background-repeat:no-repeat;
background-position:left center;
}
.lien1:hover
{
color: #F00;
background-image:url(img/mazoutred.png);
background-repeat:no-repeat;
background-position:left center;
}
Merci d'avance !!!
voici une partie du code html, j'ai plusieurs une liste principale et pas mal de sous liste.
<ul id="menu">
<li>
<a href="#" class="lien1">Composants</a>
<ul>
<li><a href="#">test1</a></li>
<li><a href="#">test2</a></li>
<li><a href="#">nous contacter</a></li>
<li><a href="#">team</a></li>
<li><a href="#">recherche</a></li>
</ul>
</li>
</ul>
mon CSS
#menu, #menu ul
{
padding : 0;
margin : 0;
list-style : none;
line-height : 50px;
text-align : center;
}
#menu
{
font-weight : bold;
font-family : Calibri;
font-size : 12px;
}
#menu a
{
display : block;
padding : 0;
background-color:#000;
text-decoration : none;
width : 150px;
}
#menu li
{
float : left;
border-right : 1px solid #fff;
line-height:200 px;
}
html>body #menu li
{
border-right: 1px solid transparent ;
}
#menu li ul
{
position: absolute;
width: 144px;
left: -999em;
}
#menu li ul li
{
border-top : 1px solid #000;
}
html>body #menu li ul li
{
border-top : 1px solid transparent;
}
#menu li ul ul
{
margin : -22px 0 0 144px ;
border-left : 1px solid #fff ;
}
html>body #menu li ul ul
{
border-left : 1px solid transparent ;
}
#menu li:hover ul ul, #menu li.sfhover ul ul /
{
left: -999em;
#menu li {height:50px;}
#menu ul:first-child > li a, #menu ul:first-child > li {height:100px }
#menu li a {padding-bottom:0px }
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul
{
left: auto;
min-height: 0;
}
.lien1{
color:#FFF;
background-image:url(img/mazoutblack2.png);
background-repeat:no-repeat;
background-position:left center;
}
.lien1:hover
{
color: #F00;
background-image:url(img/mazoutred.png);
background-repeat:no-repeat;
background-position:left center;
}
Merci d'avance !!!
