Menu CSS hauteur menu principal plus haut que sous listes
Fermé
mika5490
Messages postés
7
Date d'inscription
vendredi 9 août 2013
Statut
Membre
Dernière intervention
13 août 2013
-
9 août 2013 à 19:41
Sugel Messages postés 4076 Date d'inscription jeudi 18 août 2011 Statut Membre Dernière intervention 19 juin 2017 - 22 août 2013 à 16:00
Sugel Messages postés 4076 Date d'inscription jeudi 18 août 2011 Statut Membre Dernière intervention 19 juin 2017 - 22 août 2013 à 16:00
A voir également:
- Menu CSS hauteur menu principal plus haut que sous listes
- Menu déroulant excel - Guide
- Windows 11 menu démarrer classique - Guide
- Canon quick menu - Télécharger - Utilitaires
- Réinitialiser menu démarrer windows 10 - Guide
- Menu demarrer windows 10 - Guide
7 réponses
Utilisateur anonyme
9 août 2013 à 19:51
9 août 2013 à 19:51
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
mika5490
Messages postés
7
Date d'inscription
vendredi 9 août 2013
Statut
Membre
Dernière intervention
13 août 2013
9 août 2013 à 20:23
9 août 2013 à 20:23
salut,
oui c'est un bon site, je suis allé pas mal de fois dessus mais je ne trouve pas :(
oui c'est un bon site, je suis allé pas mal de fois dessus mais je ne trouve pas :(
Utilisateur anonyme
9 août 2013 à 20:48
9 août 2013 à 20:48
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
mika5490
Messages postés
7
Date d'inscription
vendredi 9 août 2013
Statut
Membre
Dernière intervention
13 août 2013
9 août 2013 à 20:59
9 août 2013 à 20:59
re, oui je m'en suis inspiré aussi mais j'aimerais l'améliorer.
Si tu veux j'aimerais que la hauteur de ma première ligne du menu soit plus haute que celles qui s'ouvrent quand je passe la souris
Liste principale = 60 px
Sous liste = 30 px
Merci !
Si tu veux j'aimerais que la hauteur de ma première ligne du menu soit plus haute que celles qui s'ouvrent quand je passe la souris
Liste principale = 60 px
Sous liste = 30 px
Merci !
Sugel
Messages postés
4076
Date d'inscription
jeudi 18 août 2011
Statut
Membre
Dernière intervention
19 juin 2017
725
9 août 2013 à 21:18
9 août 2013 à 21:18
Salut :)
Sur cette page, par exemple, le code sera:
Sur cette page, par exemple, le code sera:
#menu li {height:30px;}
#menu ul:first-child > li a, #menu ul:first-child > li {height:60px !important;}
#menu li a {padding-bottom:0px !important;}
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
mika5490
Messages postés
7
Date d'inscription
vendredi 9 août 2013
Statut
Membre
Dernière intervention
13 août 2013
10 août 2013 à 11:18
10 août 2013 à 11:18
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;
Sugel
Messages postés
4076
Date d'inscription
jeudi 18 août 2011
Statut
Membre
Dernière intervention
19 juin 2017
725
10 août 2013 à 13:02
10 août 2013 à 13:02
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 ?
mika5490
Messages postés
7
Date d'inscription
vendredi 9 août 2013
Statut
Membre
Dernière intervention
13 août 2013
13 août 2013 à 18:59
13 août 2013 à 18:59
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 !!!
Sugel
Messages postés
4076
Date d'inscription
jeudi 18 août 2011
Statut
Membre
Dernière intervention
19 juin 2017
725
13 août 2013 à 19:02
13 août 2013 à 19:02
normalement ça devrait marcher ^^'
tu as essayé sans le line-height ?
tu as essayé sans le line-height ?
Bonjour,
J'ai réussi merci mais en fait ma premiere ligne est bien plus grande que les lignes dans mes sous listes, mais la dernière ligne dans mes sous listes est aussi grande que la première ligne.
Merci
J'ai réussi merci mais en fait ma premiere ligne est bien plus grande que les lignes dans mes sous listes, mais la dernière ligne dans mes sous listes est aussi grande que la première ligne.
Merci
Sugel
Messages postés
4076
Date d'inscription
jeudi 18 août 2011
Statut
Membre
Dernière intervention
19 juin 2017
725
22 août 2013 à 16:00
22 août 2013 à 16:00
tu as un lien vers la page en question histoire que je regarde ça, ou la page n'est pas e ligne ?