Taille FONT dans un sous menu déroulant

**solorac** · 06/11/2017, 21h05

Bonsoir la Communauté,

Je voudrais diminuer la taille de mon texte dans mon sous-menu déroulant mais bien-sur je n'y arrive pas.

J'aimerai que le menu niveau 1 reste en taille normale et que les sous-menu sans survol et avec survol passe à la taille en dessous. En fait, Présentation doit rester à la taille définie dans la base de mon site et c'est "Qui, Quoi et Comment" que je voudrais réduire.

Voici mon code htlm :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<ul id="menu2">
	<li><a href="#">Accueil</a></li>
	<li><a href="#">Présentation</a>    
		<ul>
			<li><a href="page2.html">Qui ?</a></li>
		 	<li><a href="page3.html">Quoi ?</a></li>
			<li><a href="page4.html">Comment</a></li>
		</ul>
	</li>
 
	<li><a href="#">Services</a>
		<ul>
			<li><a href="page5.html">Nos pl</a></li>
			<li><a href="page6.html">Nos part</a></li>
		</ul>
	</li>
 
  	<li><a href="page7.html">M.D.A.</a></li>
 
  	<li><a href="page8.html">&nbsp;</a></li><!-- METTRE ESPACE si pas de texte--> 
 
  	<li><a href="page9.html">Contact</a></li>
 
</ul>

Et voici le code css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
/* background des liens menus */
#menu2 li:first-child{
background:url(../images/visiteurs/b5a.png);
margin-top:-3px;
}
#menu2 li:nth-child(2){
background:url(../images/visiteurs/b5a.png);
}
#menu2 li:nth-child(3){
background:url(../images/visiteurs/b5a.png);
}
#menu2 li:nth-child(4){
background:url(../images/visiteurs/b5a.png);
}
#menu2 li:nth-child(5){
background:url(../images/visiteurs/b5na.png);
}
#menu2 li:last-child{
background:url(../images/visiteurs/b5a.png);
}
 
 
 /*background des liens menus et sous menus au survol */
#menu2 li:first-child:hover, #menu2 li:first-child li:hover{
background:url(../images/visiteurs/b6x.png);
}
#menu2 li:nth-child(2):hover, #menu2 li:nth-child(2) li:hover{
background:url(../images/visiteurs/b6x.png);
}
#menu2 li:nth-child(3):hover, #menu2 li:nth-child(3) li:hover{
background:url(../images/visiteurs/b6x.png);
}
#menu2 li:nth-child(4):hover, #menu2 li:nth-child(4) li:hover{
background:url(../images/visiteurs/b6x.png);
}
#menu2 li:nth-child(5):hover {
background:url(../images/visiteurs/b6ny.png);
}
#menu2 li:last-child:hover, #menu2 li:last-child li:hover{
background:url(../images/visiteurs/b6x.png);
}

J'espère que vous pourrez m'aider. Je dois être pas loin de la soluce mais là je ne vois plus.
Merci pour votre aide.

**NoSmoking** · 07/11/2017, 10h24

Bonjour,
j'ai du mal à voir où tu bloques, il te suffit de cibler les <li> de deuxième niveau de ton menu.

PS : le CSS que tu présentes me paraît à priori bien compliqué !

**solorac** · 07/11/2017, 10h53

Bonjour NoSmoking,

Mais c'est là où le bât blesse !!!

Je n'arrive pas à "limiter" ma réduction de taille au deuxième niveau.
Je ne connais tout simplement pas le code !!

**solorac** · 07/11/2017, 10h57

Lorsque j'applique le code suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 /*background des liens menus et sous menus au survol */
#menu2 li:first-child:hover, #menu2 li:first-child li:hover{
background:url(../images/visiteurs/b6x.png);
}
#menu2 li:nth-child(2):hover, #menu2 li:nth-child(2) li:hover{
background:url(../images/visiteurs/b6x.png); font-stretch:semi-condensed; font-size:12px;
}

Lors du survol de "Présentation", certe Qui, Quoi et comment", passent en taille réduite mais Présentation aussi !!

**JujuPomme** · 07/11/2017, 13h12

Hello,

C'est normal, si on regarde un peu la structure de ta liste, "Présentation", "Qui", "Quoi", "Comment" ont exactement les mêmes dénominateurs et donc ton CSS, s'applique de la même manière à tout ces éléments.

Je te conseil dans un premier temps, de rajouter une classe uniquement sur les éléments qui nécessitent tes changements et d'y appliquer les propriétés nécessaires.

Juste, petite remarque qui a été soulevé plus haut, ton CSS m'a l'air bien compliqué pour l'utilisation voulue. Ce qui est encore plus dommage, c'est qu'il ne soit pas le tiens visiblement... Tu pourrais énormément alléger ton code afin qu'il soit plus claire pour toi, puisque là, il ne t'apprend pas grand chose.

Bon courage en tout cas,

See yaaa