Bonjour à tous,

j'ai réalisé un menu css déroulant qui au survol d'un bouton affiche un sous-menu. j'utilise ce procédé à plusieurs endroits sur ma page.

Le problème est que sous FF, et opera le menu passe parfaitement, mais sous Chrome le menu s'affiche bien au survol du bouton mais disparait instantanement dés que j'essaye de parcourir le sous-menu, bref dés que je ne survol plus le bouton.

Prenons par exemple le sous-menu du bouton "move" (<li id="btnMove"), nous avons une liste (ul) à l'interieur de ce de "btnMove", composé de 3 li de class = "liMoveContent" contenant eux-meme des span ne servant qu'à donner un peu de style à ces éléments de liste, mais ce n'est pas ce qui nous interesse car le menu s'affiche bien sous tous les navigateurs, seul le comportement est ici problématique.

Mon code HTML est structuré de cette maniere :

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
<!-- Template du menu d'édition d'un contenu -->
	<div id='contentMenuTemplate' class='ContentMenu'>
		<ul class="ulContentMenu">
			<li class="MenuBtn BtnAdd">
				<ul id="ulAdd" class="ulAdd"></ul>
			</li>
			<li class="MenuBtn BtnEdit">
			</li>
			<li class="MenuBtn BtnMove">
				<ul id="ulMove" class="ulMove">
                                      <li id="li_move_ID_a1_to_b1" class="liMoveContent">
                                              <span id="span_move_ID_a1_to_b1" class="moveUpRight4">En haut à droite</span>
                                      </li>
                                      <li id="li_move_ID_a1_to_a2" class="liMoveContent">
                                              <span id="span_move_ID_a1_to_a2" class="moveDownLeft4">En bas à gauche</span>
                                      </li>
                                      <li id="li_move_ID_a1_to_b2" class="liMoveContent">
                                               <span id="span_move_ID_a1_to_b2" class="moveDownRight4">En bas à droite</span>
                                      </li>
                                </ul>
			</li>
			<li class="MenuBtn BtnChange">
				<ul id="ulChange" class="ulChange"></ul>
			</li>
			<li class="MenuBtn BtnDelete">
			</li>
		</ul>
	</div>
Et voici le CSS gérant l'affichage du menu :

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
57
 
/*par defaut, la liste du sous menu est a display none*/
.ulMove {
	display : none;	
	list-style: none outside none;
	margin: 0;
	padding: 0;
	position: absolute;
	text-align: left;
	width: 250px;
	z-index: 1000; }
 
.liMoveContent {
	text-decoration:none;
	width : 250px;
	list-style:none;
	background:url("../images/Results/ssmenu.png") repeat-y scroll 0 0 #049FCB;
	border-color:#9BE2F6 #0D8EB2 #0D8EB2 #9BE2F6;
	border-top:1px solid #9be2f6;
	border-left:1px solid #9be2f6;
	border-bottom:1px solid #0d8eb2;
	border-right:1px solid #0d8eb2; }
 
.liMoveContent:hover {
	cursor : pointer;
	border-top:1px solid #9be2f6;
	border-left:1px solid #9be2f6;
	border-bottom:1px solid #0d8eb2;
	border-right:1px solid #0d8eb2;
	background-color:#04baee; }
 
.liMoveContent span {
	width:190px !important;
	border:0;
	padding:0 0 0 60px;
	margin:0;
	text-indent:0;
	font-weight : bold;
	font : 14px/35px Arial,Helvetica,sans-serif;
	vertical-align:middle;
	color:white;
	text-decoration:none; }
 
.liMoveContent span:hover {
	background-color:#04baee; }
 
/*c'est ici que je gere l'affichage du sous menu, lors du survol du bouton alors la liste ulMove passe a display block, marche très bien sous FF, opera et ie*/		
li.BtnMove:hover ul.ulMove {
	display:block; }
 
/*ces deux la sont des tentatives pour faire comprendre a chrome
de m'afficher la liste au survol mais rien n'y fait*/	
ul.ulMove:hove li.liMoveContent {
	display:block; }
 
li.liMoveContent:hover { 
	display : block; }
Le pire c'est que sur la meme page j'ai un autre bouton mais au lieu d'etre un li c'est un div et j'utilise le même code à savoir :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
 
div#head-content-select-grid-r:hover ul#ul_drop_content {
	display:block; }
Et cela marche parfaitement sous Chrome...

Aidez-moi svp j'ai essayé de passer tous mes li de class liMoveContent à display : block lors du survol de leur survol mais rien n'y fait, Chrome fait disparaitre le menu dés que je quitte mon bouton principal.