Discussion :

[wonderwall]

Bonjour à tous,

je fais une recherche pour mon frère à distance, je vous expose son problème car j'ai chercher mais en vain...

Il a essayé d'intégrer des menus déroulants à son site avec l'aide des turoriels CSS présent sur votre site:
http://css.developpez.com/cours/

Le problème c'est que les sous-menus ont tendance à se loger derrière les autres informations du site

Il a pensé à remédier ce problème avec des z-index en les mettant dabord aux endroit qu'il pensait nécessaire, puis en les mettant de partout vu que ça ne marchait toujours pas, et ça marche toujours pas

Si quelqu'un avait une solution merci beaucoup

A bientôt

[blueice]

N'ayant pas plus de précisions, en jouant avec le z-index du menu ca devrait faire l'affaire.

[wonderwall]

Voila j'ai mis mon probleme sur ftp :

http://nebulis.chez-alice.fr/Projet_Pneus/index.php : On y voit clairement que le sous menu va se loger sous le formulaire de connexion

Je vous met 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
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
 
#menuDeroulant
{
	width: 644px;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
}
 
#menuDeroulant li
{
	float: left;
	width: 150px;
	margin: 0;
	padding: 0;
	border: 0;
}
 
#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;
}
 
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
	display: block;
	height: auto;
	color: #FFF;
	background: #3B4E77;
	margin: 0;
	padding: 4px 8px;
	border-right: 1px solid #fff;
	text-decoration: none;
}
 
#menuDeroulant li a:hover
{
	background-color: #F2462E;
}
#menuDeroulant .sousMenu li a:link, #menuDeroulant .sousMenu li a:visited
{
	display: block;
	color: #FFF;
	margin: 0;
	border: 1px dotted blue;
	text-decoration: none;
	background: transparent;
}
 
#menuDeroulant .sousMenu li a:hover
{
	background-image: none;
	background-color: purple;
}
 
#menuDeroulant li:hover > .sousMenu
{
	display:block;
}
#menuDeroulant .sousMenu:hover, #menuDeroulant .sousMenu a:hover
{
	z-index: 1;
	border : 4px solid purple;
}

Le HTML associé :

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
	<ul id="menuDeroulant">
		<li>
			<a href="#">Partie 1</a>
			<ul class="sousMenu">
				<li><a href="#">castor</a></li>
				<li><a href="#">aligator</a></li>
				<li><a href="#">musclor</a></li>
			</ul>
		</li>
		<li>
			<a href="#">Partie 2</a>
			<ul class="sousMenu">
				<li><a href="#">whisky</a></li>
				<li><a href="#">vodka</a></li>
				<li><a href="#">gin</a></li>
				<li><a href="#">vin</a></li>
				<li><a href="#">champagne</a></li>
			</ul>
		</li>
	</ul>

Voila les z-index n'ont rien donné donc je sais vraiment pas quoi faire. Ca n'a surement pas de rapport mais j'utilise un include pour intégrer le menu

Si quelqu'un a une idée ....

[blueice]

normal le form est en absolute

[wonderwall]

Juste le fait que le form soit en absolute, mon sous menu passe en dessous?

Donc il faut que je trouve un autre moyen pour placer mon formulaire c'est ca?

[blueice]

Un header suivi de deux blocs en float (menu+contenu) par exemple...

[wonderwall]

Oki, c'est ce que je pensais aussi faire

Je vais tenter tout ca, merci beaucoup pour votre aide