menu déroulant CSS : FF OK Opera OK Chrome NON [Résolu]

[charlene44]

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 :

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 :

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 :

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.

[ornitho13]

Bonjour,

je viens d'essayer sous chrome et cela fonctionne parfaitement.

[charlene44]

Ah... je viens de ré-essayer ce n'est toujours pas ca, je dois manquer quelque chose pourtant d'apres firebug aucun autre code que celui que j'ai fourni n'a d'effet sur le menu...

je vais revoir avec mes collègues mais là je sèche un peu

[e-fitz]

Bonsoir,
avec le code donné tel quel plus haut moi aussi le menu fonctionne bien sous Chrome (avec quelques incoherence sur le cursor et les background).

Bonne soirée

[charlene44]

En effet, le problème est résolu, après plusieurs tests me menant à intégrer tous mes css à ma petite page de tests tout fonctionnait normalement, j'ai ensuite intégrer ce menu directement dans ma page et celui ci fonctionnait, j'ai continué à l'intégrer un peu partout dans ma page.

Enfin, j'ai fini par trouver qu'il s'agissait d'une interaction avec le div conteneur juste au dessus sur lequel je faisais en JS un show et un hide en fonction du survol de la souris sur le bloc.

j'ai gérer ce survol en css au lieu du js et cela fonctionne parfaitement maintenant.

Donc, pour ceux qui auraient ce problème faites bien attention si vous utilisez hide() et show() au survol de la souris