Discussion :

[Geoffrey74]

Bonjour,

j'ai un petit soucis que je n'arrive pas à résoudre.

J'ai un menu fait de UL et LI, avec un sous menu.

Tous fonctionne bien, sauf que, le sous menu passe sous la div qui suit le menu...

J'ai beau rajouter un z-index partout dans le sous menu, ça ne marche pas, pourtant il est bien déclaré en position absolute.

Vu qu'un bout de code est plus parlant, voici mon code :

Partie HTML

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
<div id="menu">
	<ul>
		<li> <a <?php if($Page == "accueil") echo 'class="active"'; ?> href="<?php echo URL; ?>accueil.htm" title="Retour à l'accueil" >Accueil </a> </li>
		<li> <a <?php if($Page == "videos") echo 'class="active"'; ?> href="<?php echo URL; ?>videos.htm" title="Voir la section Vidéos" >Vidéos </a> </li>
		<li> <a <?php if($Page == "photos") echo 'class="active"'; ?> href="#" title="Voir la section Photos" >Photos </a> 
		<ul>
			<li><a href="<?php echo URL; ?>photos-soft.htm" title="Voir la section Photos Soft" >Photos Soft <br />(Gratuite)</a></li>
			<li><a href="<?php echo URL; ?>photos-hard.htm" title="Voir la section Photos Hord" >Photos Hard <br />(Accès membre)</a></li>
		</ul>
		</li>		
	</ul>
</div>

Partie 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
/* *** *** MENU *** *** */
#menu {
	font-size: 26px;
	margin-top: 30px;
	position: relative;
	float: right;
    left: -50%;
	text-align:left;
	display: block;
}
#menu ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-align :center;
	left: 50%;
	position: relative;
 }
#menu li {
	float: left;
	margin: auto;
	padding: 0;
	margin-left: 80px;
 }
#menu li a {
	display: block;
	width: 150px;
	border: 1px dotted #FE2EF7;
	padding: 10px;
	border-radius: 10px;
}
#menu li:first-child { 
	margin-left: 0;
}
#menu li a.active, #menu li a:hover{
	color: #FE2EF7 !important;
 }
 /* SOUS MENU */
#menu ul li ul {
	display: none;
	font-size: 16px;
	left: initial;
	float: none;
	z-index: 1000;
 }
#menu ul li:hover ul {
	display: block;
}
#menu li ul {
	position: absolute;	
}
#menu li ul li{
	margin-left: 0;	
}
 
/* *** *** FIN MENU *** *** */

Ce qui me donne visuellement :


Si quelqu'un a une idée, je suis preneur.