Menu déroulant par-dessus une image [Résolu]

[feldi]

Bonjour à tous,

pour mon site, je dispose d'un menu déroulant en css qui fonctionne :

Code php :

1
2
3
4
5
6
7
8
9
10
 
<ul id="menu">
	<li><a href="page_principale.php">Accueil</a>
	</li>
	<li><a href="presentationTechniqueEau.php">Eau</a>
		<ul class="sousMenu">
		  <li><a href="presentationTechniqueEau.php">Présentation technique</a></li>
		  <li><a href="qualite_eau.php">Analyse et qualité de l'eau</a></li>
...
</ul>

avec le code css qui fonctionne également :

Code css :

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
 
#menu {
 margin-left:5%;
 margin-right:5%;  /* taille de la marge à droite et à gauche du menu    */
 list-style-type:none; /* apparence des listes à puces */
 text-align:center; /* alignement du texte */
 }
#menu li {
 float:left; /* ancrage des thèmes sur la gauche */
 margin:auto;
 padding:0;
 background-color:lightblue;
 }
#menu li a {
 display:block;
 width:100px;
 color:black;
 text-decoration:none;
 padding:5px;
 }
#menu li a:hover {
 color:black;
 }
#menu ul li ul {
 display:none;
 }
#menu ul li:hover ul {
 display:block;
 }
#menu li:hover ul li {
 float:none;
 color:lightblue;
 }
#menu li ul {
 position:absolute;
 }

et sur la page ou mon menu doit se dérouler, j'ai mis une image en fond.
=>

Code php :

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<div id='image_transparente'>
	<div id='texte_au_dessus'>
		<div id='container' align=center>
			<p>
				<i><em>Important</em> : Afin de pouvoir visualiser les fichiers en format <em>PDF</em>, <br/>
				vous devez vous munir de la denière version de <em>Adobe® Reader®</em> disponible en cliquant <a href="http://get.adobe.com/fr/reader/">ici</a> </i>
 
				<h1> Espace actualités </h1> 
...
</div>
</div>
</div>

avec le code css qui fait que l'image s'affiche bien derrière le texte :

Code css :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
#image_transparente {
	width: 2048;
	height: 1536;
	background: url("images/photo_ume.jpg") no-repeat;
	filter:alpha(opacity=90);
    opacity:0.9;
    position: relative;
 
}
 
#texte_au_dessus {
	filter:alpha(opacity=70);
    opacity:0.7;
	text-align: center;
	position: relative;
	top: 0;
	left: 0;
}

Le problème étant que mon menu déroulant déroule derrière l'image.
Y a t-il une propriété CSS pour que le menu se déroule par dessus l'image ?
Sans l'image, le menu se déroulait correctement par dessus le texte.

Merci

[David55]

J'ai l'impression que c'est une histoire de position. Il faut essayer de modifier ce paramètre pour voir ce que ca change!

Par exemple, essaye d'enlever ce paramètre dans la classe image_transparente


PS: Je te conseille d'utiliser firebug, tu gagnera du temps et tu verra directement tes changements sur ton navigateur!

[feldi]

Merci pour le conseil.
Effectivement, en enlevant position:relative de l'image, le menu se déroule par-dessus l'image. Par contre, je ne peux pas cliquer sur tous les liens, le menu revient à sa position initiale si je descend trop avec la souris.

Je vais faire encore quelques test et je te tiens au courant.

Edit : il fallait aussi enlever le position:relative pour le texte sur l'image.

C'est bon !