CSS en dessous d'un div

Version imprimable

Bonjour à tous,

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

http://img11.hostingpics.net/pics/666489capt.png

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

09/06/2011, 14h07
Bisûnûrs

Ca sent IE6 à plein nez ça. Donc :
http://javascript.developpez.com/faq...put.div.select
09/06/2011, 14h18
Code85

Citation:

Ca sent IE6 à plein nez ça

Je suis grillé :mouarf:

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...
09/06/2011, 14h21
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.
09/06/2011, 15h38
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>.
09/06/2011, 16h07
Bisûnûrs

Citation:

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).
10/06/2011, 10h28
Code85

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

Encore merci. :ccool: