Bonjour,

Dans la création du site web que j'ai a faire(avec beaucoup de jquery), je dois creer un menu (définit pas unr balise div) qui s'affiche quand je passe la souris dessus.

J'utilise donc mouseover pour afficher le menu et mouseout pour le cacher. Jusqu'ici tout va bien.

Mon problème est lorsque j'insère des éléments dans mon menu (par exemple une balise <p>toto</p> définissant un titre du menu) et que je passe la souris sur toto, mon menu se ferme, alors que ma souris est encore dessus.

voici le code:

* JS:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
jQuery("#menu").mouseover(function(){
	jQuery("#menu").animate({"left": "+=200px"}, "slow");					
});
jQuery("#menu").mouseout(function(){
	jQuery("#menu").animate({"left": "-=200px"}, "slow");					
});
*HTML:
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
<div id="menu">	
	<div>
		<p class="nom">toto</p>
		<p class="nom">tata</p>
	</div>
</div>

*CSS
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
#menu {
	background-color: rgb(227, 114, 34);
	height: 550px;
	width: 250px;
	position: fixed;
	left: -200px;
	top: 200px;
}
#menu .toto{
	position: relative;
	left: 10px;
	top: 35px;
}

Les recherches que j'ai faites ont porté sur les hiérarchies, l'héritage, la propriété z-index du CSS, mai sje n'ai rien trouvé de concluant.

J'ai également modifié le code html en jouant sur les div, sans résultat.

J'aimerais donc bien avoir votre aide.

Merci,

T.Grosroyat