Menu CSS hauteur menu principal plus haut que sous listes

mika5490 Messages postés 7 Date d'inscription   Statut Membre Dernière intervention   -  
Sugel Messages postés 4076 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



A voir également:

7 réponses

Réponse 1 / 7
Utilisateur anonyme
 
salut, je te conseil ce site; c'est du bon matos :

http://css.mammouthland.net/menu-horizontal-deroulant-en-css.php
0
Réponse 2 / 7
mika5490 Messages postés 7 Date d'inscription   Statut Membre Dernière intervention  
 
salut,

oui c'est un bon site, je suis allé pas mal de fois dessus mais je ne trouve pas :(
0
Réponse 3 / 7
Utilisateur anonyme
 
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
0
Réponse 4 / 7
mika5490 Messages postés 7 Date d'inscription   Statut Membre Dernière intervention  
 
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 !
0
Sugel Messages postés 4076 Date d'inscription   Statut Membre Dernière intervention   727
 
Salut :)
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;}
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 7
mika5490 Messages postés 7 Date d'inscription   Statut Membre Dernière intervention  
 
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;
0
Sugel Messages postés 4076 Date d'inscription   Statut Membre Dernière intervention   727
 
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 ?
0
Réponse 6 / 7
mika5490 Messages postés 7 Date d'inscription   Statut Membre Dernière intervention  
 
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 !!!
0
Sugel Messages postés 4076 Date d'inscription   Statut Membre Dernière intervention   727
 
normalement ça devrait marcher ^^'
tu as essayé sans le line-height ?
0
Réponse 7 / 7
mika5490
 
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
0
Sugel Messages postés 4076 Date d'inscription   Statut Membre Dernière intervention   727
 
tu as un lien vers la page en question histoire que je regarde ça, ou la page n'est pas e ligne ?
0

Discussions similaires

menu caché
laurent -
ChariduP -

7 réponses
Mon PC marque press the esc key for startup menu
Jonas2022 -
SATS_fr -

5 réponses
Dimensions L x l x H : comment lire ces infos ?
Miss-Curieuse -
valou -

8 réponses
Activer le bluetooth sur smart TV Samsung
Odayakana -
callens -

4 réponses