Discussion :

[over-]

Bonjour, j'ai télécharger le menu slate disponible à cette adresse : http://css.developpez.com/galerie/?p...us-horizontaux.

Je voudrai donc pouvoir le faire dérouler simplement vers le bas. Mais malgré tout mes efforts, notamment en regardant des tutoriaux sur internet je n'ai pas pu arriver à le mettre en fonction. Auriez-vous une piste ? Tout ce que j'essai d'adapter au menu ne fonctionne pas ! voilou voilou

[over-]

Bonjour, j'ai maintenant réussi à pouvoir faire dérouler le menu, mais j'ai maintenant un problème qui vient se poser. Lorsque je passe ma souris au dessus d'une rubrique, le menu n'est pas vertical mais horizontal, donc tout le menu se décale vers la droite pour laisser place au sous-menu. On dirait en fait que le style du menu static pose ses règles sur le sous-menu comme si le style du sous-menu n'était pas pris en compte . Je vous joins les 2 parties du codes :

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<div class="red">
	<div id="slatenav">
	<ul id="menuDeroulant">
		<li>
			<a href="accueil.php">ACCUEIL</a>
		</li>
		<li>
			<a href="news.php">ACTUALITES</a>
		</li>
		<li>
			<a href="guides.php">ESSAI</a>
 
			<ul class="sousMenu">			      
				<li><a href="#">ESSAI</a></li>
				<li><a href="#">ESSAI</a></li>
				<li><a href="#">ESSAI</a></li>
			</ul>
		</li>
		<li>
 
			<a href="#">ESSAI</a>
			<ul class="sousMenu">			      
				<li><a href="#">ESSAI</a></li>
				<li><a href="#">ESSAI</a></li>
			</ul>
		</li>
		<li>
 
			<a href="#">MEDIAS</a>
			<ul class="sousMenu">			      
				<li><a href="#">IMAGES</a></li>
				<li><a href="#">VIDEOS</a></li>
				<li><a href="#">AUTRES</a></li>
			</ul>
		</li>
		<li>
 
			<a href="forum.php">FORUM</a>
 
		</li>
		<li>
 
			<a href="#">DIVERS</a>
			<ul class="sousMenu">			      
				<li><a href="#">ESSAI</a></li>
				<li><a href="#">ESSAI</a></li>
				<li><a href="#">ESSAI</a></li>
			</ul>
		</li>
		<li>
 
			<a href="contact.php">CONTACT</a>
 
		</li>
	</ul>
	</div>
	</div>

et le style :

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
42
43
44
45
46
47
48
49
50
51
52
53
.red
{height:40px; margin-left: 12px; position: relative; z-index: 10;}
 
.red #slatenav
{position:absolute;display:block;height:42px;font-size:11px;font-weight:bold;background:transparent url(images/redslate_background.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase; width: 876px; margin: auto;}
 
.red #slatenav ul
{margin:0px;padding:0;list-style-type:none;width:auto;margin-left: 20px;}
 
.red #slatenav ul li
{display:block;float:left;margin:0 1px 0 0; min-width: 85px;}
 
.red #slatenav ul li a
{display:block;float:left;color:white;text-decoration:none;padding:14px 22px 0 22px;height:28px;}
 
.red #slatenav ul li a:hover,.red #slatenav ul li a.current
{color:#fff;background:transparent url(images/redslate_backgroundOVER.gif) no-repeat top center;}
 
#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;
	background: transparent url("fondTR.png") repeat;
}
#menuDeroulant .sousMenu li a:hover
{
	background-image: none;
	background-color: #F2462E;
}
 
#menuDeroulant li:hover > .sousMenu { display: block; }

Voilà j'avance petit à petit :p, en espérant que vous pourrez me guidé vers une solution définitive ! Cdlt.

[over-]

Problème résolu, les chemins de mes sélecteur n'étaient pas bons, ils étaient mal imbriquées...

Ensuite, j'avais un second soucis, le style du sous menu prenait le style du menu normal. J'ai donc encore un cours CSS, et j'ai pu le résoudre en indiquant un attribut en plus aux balises du menu pour qu'ils ne soient appliqués qu'à eux. Enfin bref tout est indiqué dans la page que j'ai donné. En tout cas merci quand même !! J'espère que ça en aidera d'autres ^^.