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 : 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
 
<!-- 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 : 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
 
/*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