[Résolu] Le traducteur google fait perturbe Jquery sous Firefox

Bonjour,

J'ai un menu avec sous menu déroulant animé avec du Jquery. Mais lorsque j'ai intégré le module de google pour la traduction, un bug est apparue, je n'ai plus d'intéractivité avec le menu déroulant. Il se déroule mais ne reste plus déroulé lorsque le curseur va dessus, et je ne peut plus cliquer sur les liens qu'il contient.

Sous IE, il n'y a pas ce problème.

Un peu de code ? :


Le HTML :

<ul class="topnav">
		    <li><a href="#">Accueil</a></li>
		    <li class="menu_separ"></li>
		    <li>
			<a href="#">Menu</a>
			<ul class="subnav">
			    <li><a href="#">Sub Nav Link</a></li>
			    <li><a href="#">Sub Nav Link</a></li>
			    <li><a href="#">Sub Nav Link</a></li>
			    <li><a href="#">Sub Nav Link</a></li>
			</ul>
		    </li>
		    <li class="menu_separ"></li>
		    <li>
			<a href="#">Menu</a>
			<ul class="subnav">
			    <li><a href="#">Sub Nav Link</a></li>
			    <li><a href="#">Sub Nav Link</a></li>
			</ul>
		    </li>
		    <li class="menu_separ"></li>
		    <li><a href="#">Menu</a></li>
		    <li class="menu_separ"></li>
		    <li><a href="#">Menu</a></li>
		    <li class="menu_separ"></li>
		    <li><a href="#">Menu</a></li>
		    <li class="menu_separ"></li>
		    <li><a href="#">Contact</a></li>
		</ul>

Le CSS :

/*  <<<<<<<<<<<<<<      MENU        >>>>>>>>>>>>>>>   */
ul.topnav {
	border: green solid 0px;
	display:table;
	text-align:center;
	list-style: none;
	padding: 2px;	
	margin: 0px;
	width: 100%;
	background: #545456;
	font-size: 1em;
	font-weight:bold;
}
ul.topnav li {
	position:relative;
	border: green solid 0px;
	display:table-cell;
	text-align:center;	
	padding: 0 0% 0 0%;
}
ul.topnav li a{
	padding: 0px 0px;
	color: #fff;
	display: block;
	text-decoration: none;
}
ul.topnav li a:hover{
	background: url(topnav_hover.gif) no-repeat center top;
	color: #9e00ff;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
	list-style: none;
	position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
	top: 10%;
	margin: 0 0 0 0; 
	padding: 0;
	border: 1px solid #111;
	z-index:-10;
	font-weight:normal;
	font-size:11pt;
}
ul.topnav li ul.subnav li{
	display:block;
	margin: 0; 
	padding: 0 0 0 10px;
	border-top: 1px solid; /*--Create bevel effect--*/
	border-bottom: 1px solid; /*--Create bevel effect--*/
	border-color: rgba(100, 100, 100, 0.7);
	clear: both;
	background-color: rgba(84, 84, 86, 0.9);
	text-align:left;
}
ul.topnav li ul.subnav li:hover{
	border-color: rgba(100, 100, 100, 1);
	background-color: rgba(158, 0, 255, 1);
}
html ul.topnav li ul.subnav li a {
	margin: 0 0 0 0; 
	padding: 0 0 0 0;
	color: #fff;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
}
ul.topnav li.menu_separ{
	border: solid red 0px;
	width:1%;
	height:1%;
	background: #545456 url(../img/menu_separ.png) no-repeat center;
	-webkit-background-size: cover; /* pour Chrome et Safari */
	-moz-background-size: cover; /* pour Firefox */
	-o-background-size: cover; /* pour Opera */
	background-size: cover; /* version standardisée */
}
li.menu_separ img{
	border: solid green 1px;
	margin: 0 0 0 0; 
	padding: 0 0 0 0;
}

Le Jquery :

$(function(){
	
	$("ul.topnav li").mouseover(function() { //When trigger is clicked...
		var upTo = $(this).children("ul").css("height");
		var width = $(this).css("width");
		$(this).find("ul.subnav").css("min-width", width );
		$(this).find("ul.subnav").stop().animate({
			top: '-'+upTo
			}, 500, function() {
			// Animation complete.
			top: '0'
		});
		
	});
	$("ul.topnav li").mouseout(function() {	
		var downTo = $("ul.topnav li ul").css("height");
		$(this).find("ul.subnav").stop().animate({
			top: '0'
			}, 500, function() {
			// Animation complete.
			top: '-'+downTo
		});
	});	
})

D'avance, merci pour votre aide ;o)

Et voici une version en ligne : http://www.mrwhiteweb.fr/sites/test/www/

Et je me rends compte que sous Firefox, même le modul de traduction ne fonctionnement... Mais fonctionne sous IE. C'est pas banal ça, d'avoir des problèmes avec FF et pas IE ^^

J'ai trouvé mes solutions ^^

Pour le menu déroulant, en jouant sur les z-index le sous menu redevient interactif. Le module de google à sans doute une sorte de claque sur toute la page à z-index:0 , ou quelque chose du style.

Ensuite l'autre problème concernant le module qui ne fonctionné pas sous FF. Je l'ai sortie de mon en-tête, le plaçant en absolut par rapport à la page plutôt que mon header. Je comprend pas bien pourquoi mais comme ça, ça fonctionne.

Comme quoi, après une petite pose, on a les idées plus fraiche et on trouve soi même les solutions ^^

En espérant que ça puisse servir un jour à quelqu'un ;o)