CSS en dessous d'un div [Résolu]

[Code85]

Bonjour à tous,

Je vous montre mon petit souci d'affichage et vous explique ensuite.



En fait, lorsque je passe la souris sur Saisie ou Visualisation, cela me fait apparaitre des sous menu.

Sauf que bizarrement, cela passe en dessous de mon bloc qui contient deux menus déroulants (Année et Mois) + un bouton OK.

Code :

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
 
<!-- MENU BANNIERE -->
<ul id="MenuDeroulant">     
	<li><a href="#"><b>Saisie</b></a>        
		<ul>            
			<li><a href="">Formulaire</a></li>                              
		</ul>    
	</li>    
	<li><a href="#"><b>Visualisation</b></a></li>
		<ul>            
			<li><a href="">Mois en cours</a></li>            
			<li><a href="">Mois précédents</a></li>                             
		</ul> 
	</li> 
</ul> 
</br></br></br></br>
 
<!--2 MENU DEROULANT + BOUTON OK--> 
<div align="center"> 
<form action="visuFormPrec.php" method="post" name="formYearMonth">
	<select id="print" size=1 name="result_date">
 
	</select>
 
	<select id="print" size=1 name="result_date_month">
 
	</select>
<input id="print" type="submit" value="ok" name="Bok">
</form>
</div>

Ainsi que le CSS:

Code :

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
 
/*MENU*/
#MenuDeroulant  
{ 
}    
#MenuDeroulant li    
{   
width:19%;
float: left;       
list-style: none; 
font: 14px Arial;
font-style: bold;
}
#MenuDeroulant li a    
{    
display:block;        
background: #8E3557;       
padding: 10px 12px;       
text-decoration: none;     
border-right: 1px solid white;  
width: auto;        
color: #FFFFFF;  
white-space: nowrap;
}   
#MenuDeroulant li a:hover    
{  
z-index:1; 
background:#8E3557;
}  
#MenuDeroulant li ul        
{    
margin: 0;           
padding: 0;           
position: absolute;            
visibility: hidden;            
border-top: 1px solid white;
}    
#MenuDeroulant li ul li       
{
float: none;            
display: inline
}        
#MenuDeroulant li ul li a       
{    
width: auto;            
background: #A61D5D;
}
#MenuDeroulant li ul li a:hover    
{
background: #E01048;
}

J'aimerai que cela passe au dessus, une idée?
J'ai essayé diverses propriétés comme les z-index, invisibility mais sans résultat.

Merci d'avance

[Bisûnûrs]

Ca sent IE6 à plein nez ça. Donc :
http://javascript.developpez.com/faq...put.div.select

[Code85]

Ca sent IE6 à plein nez ça

Je suis grillé

C'est exactement l'inverse du lien qu'il me faut. Faire passer le div en dessous.
Je veux creuser du coté de Javascript alors...

[Bisûnûrs]

Non non, c'est exactement ça qu'il te faut. En fait, ce sont les select qui passent au-dessus de ton menu. Donc tu dois faire passer ton menu au-dessus de ton select.
L'amalgame dans la FAQ parle de div, mais il s'agit de faire passer tout élément au-dessus d'un select.

[Code85]

Merci, je comprends bien la fonction, mais je n'arrive pas à l'adapter à mon code.
Cele me génère un iframe à l'écran.

J'apelle la fonction avec un onMouseOver dans un <li>.

[Bisûnûrs]

Envoyé par Code85

Cele me génère un iframe à l'écran.

C'est normal, c'est le but de la fonction. L'iframe est le seul élément pouvant passer au-dessus d'un select sur IE6. En revanche, on peut faire passer n'importe quel élément au-dessus de l'iframe (cherchez l'erreur).

[Code85]

Bon, j'ai décidé de changer de place mes select.

Encore merci.