Discussion :

[Fugugirl]

Bonjour à tous,

je tente d'adapter un menu déroulant CSS /javascript pour qu'il soit un peu plus joli quela normal... J'ai presque fait tout ce que je voulais dessus mais mes sous-menu s'affiche curieusement et je ne vois pas pourquoi.

HTML

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
25
26
27
<ul id="nav">
<li><a href="#">Qui sommes nous ?</a>
	<ul>
		<li><a href="#">Philosophie</a></li>
		<li><a href="#">Nos formateurs</a></li>
		<li><a href="#">Nous trouver</a></li>
	</ul>
</li>
 
<li><a href="#">Nos actions par thèmes</a>
	<ul>
		<li><a href="#">Rapports au client</a></li>
		<li><a href="#">Rapports au travail</a></li>
		<li><a href="#">Réseaux</a></li>
	</ul>
</li>
 
 
	<li><a href="#">Nos actions par âge</a>
		<ul>
			<li><a href="#">Enfant Adolescent</a></li>
			<li><a href="#">Adulte</a></li>
			<li><a href="#">Personnes âgées</a></li>
		</ul>
	</li>
 
</ul>

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
/* ------- MENU DEROULANT -------*/
 
#nav, #nav ul {
	float: left;
	width: 780px;
	list-style: none;
	padding:0;
}
 
#nav a {
	display: block;
	width: 160px;
	text-decoration: none;
}
 
 
#nav li a {
	float: left;
	width: 160px;
	background-color:#333366;
	font-family:"Trebuchet MS";
	font-size:12px;
	color:#FFF;
	padding:5px;
	border-right:1px solid #FFF;
}
 
#nav li:hover {
background:#336666;
}
 
#nav li ul {
	position: absolute;
	display:block;
	left: -999em;
	width: 160px;
	font-weight: normal;
	margin:25px 0 0 0;
}
 
#nav li li {
	width: 160px;
	background:#999999;
}
 
#nav li li:hover {
	width: 160px;
}
 
#nav li ul a {
	width: 160px;
	font-family:"Trebuchet MS";
	font-size:11px;
	color:#FFFFFF;
	background-color:#999999;
	padding:5 px;
	margin-top:1px;
}
 
#nav li ul a:hover {
	background-color:#FF6600;
}
 
 
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	left: -999em;
}
 
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
	left: auto;
}
 
 
 
#content {
	clear: left;
	color: #ccc;
}

Si quelqu'un trouve une piste, je lui en serai reconnaissante.

Merci à tous,
Aurélia.

[Space Cowboy]

Capture ?


Si tu ne connais pas ...
http://css.maxdesign.com.au/listamatic/index.htm

[Fugugirl]

Merci pour l'adresse. Je ne connaissais pas.

Pour voir la page, je viens de la mettre en ligne :

http://www.kimlico.com/CC/index.html

Merci de votre aide.

A.

[trotters213]

ton margin-top:1px; empêche de passer d'un élement à l'autre dans ton sous-menu de 2° niveau. Il faut que tu le supprimes si tu veux pouvoir passer du premier élément à un du dessous.

Pour ton problème, il faudrait que tu le gère avec du Javascript (c'est plus simple). Tu mets tes sous-menu à display:none et tu les fais passeràblock lorsuqe la souris se trouve sur un élément parent.

Cf : http://www.developpez.net/forums/sho...5&postcount=83

[Fugugirl]

Merci pour ton lien.

Mon margin top me sert à séparer.. rha... ça me gêne de l'enlever ou de le remplacer par un border-top mais bon si il n'y a pas d'autre solution.

Je teste avec ton code de menu... si je m'en sors

Tschüss,
Aurélia.

[trotters213]

Mon margin top me sert à séparer.. rha... ça me gêne de l'enlever ou de le remplacer par un border-top mais bon si il n'y a pas d'autre solution.

Je sais que c'est ralant, sur le lien que je t'ai filé je faisais la même chose avant mais je n'ai pas trouvé de solution pour éviter que tout s'efface donc j'ai abdiqué

[Auteur]

Je sais que c'est ralant, sur le lien que je t'ai filé je faisais la même chose avant mais je n'ai pas trouvé de solution pour éviter que tout s'efface donc j'ai abdiqué

bon, il n'est pas sur plusieurs niveaux celui-ci mais il marche :
http://www.developpez.net/forums/sho...d.php?t=270288