Menu a trois niveau en jQuery, bug d'affichage

[kopax]

Bonjour,

Après avec lu un bouquin de noob sur jQuery, je m'essai a mes premiers créations.

J'ai réalisé un menu, dont je suis absolument certain de la structure html et jquery, pourtant l'affichage deconne au niveau du slide.

Je l'ai donc refait depuis 0, complétement épuré des trucs inutile.

Mon professeur de javascript n'a pas pour le moment su me dire pourquoi mon menu déconne.


Le premier menu est de type inline.
Au clic sur un li j'affiche un sous menu avec slideToggle (fonctionne bien).

Au mouse over du li du second menu, je slidedown un autre menu.
A la sortie de la souris il doit remonté.

Pouvez vous jetez un coup d'oeil à ce petit bout de code et m'aider a comprendre ce que je fais de mal.

Merci d'avance


le jQuery

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
	$(document).ready(function() 
	{
 
		// Je masque le sous menu 1 & 2
		$('ul:eq(1)').css('display','none');
		$('ul:eq(2)').css('display','none');
 
		// Au clique d'un element du menu, j'affiche le sous menu 1
		$('ul:eq(0) > li').click(function(){
			$(this).children('ul').slideToggle();			
		});
 
		// Au survol d'un element du sous menu 1, j'affiche le sousmenu2
		$('ul:eq(1)>li').mouseover(function(){
			$(this).children('ul').slideDown();
		});
 
		// A la sortie d'un element du sous menu 1, je masque le sousmenu2
		$('ul:eq(1)>li').mouseout(function(){
			$(this).children('ul').slideUp();
		});
	});

le style css

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
		ul{
			list-style-type:none;
			padding:0px 0px 0px 15px;
		}
		li{
			width:100px;
			display:block;
		}
		a{
			width:100px;
		}
		#firstul{
			position:relative;
		}
		#firstul > li{
			display: inline-block;
		}
		#firstul ul{
			position:absolute;
		}

le contenu du body

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<ul id='firstul'>
	<li><a href="#">Lien</a></li>
	<li><a href="#">Lien</a>
		<ul>
			<li><a href="#">Sous Menu 1</a></li>
			<li><a href="#">Sous Menu 1</a>
				<ul>
					<li><a href="#">Sous Menu 2</a></li>
					<li><a href="#">Sous Menu 2</a></li>
					<li><a href="#">Sous Menu 2</a></li>
				</ul>
			</li>
		</ul>
	</li>
	<li><a href="#">Lien</a></li>
</ul>

Voila il y a rien d'autre dans ma page (73 lignes en tout).

merci d'avance pour votre aide !

[kopax]

Pour ceux que ça pourrai aidé,

Après avoir longtemps tourné en rond a essayé de comprendre ce problème, j'ai finalement utilisé l'écouteur 'on' de la nouvelle version de jquery.

Avec ce code j'ai réussi à obtenir mon slide :

Code :

1
2
3
4
5
6
$("#nav ul:eq(1)").on("mouseenter", 'li', function(event){
	$(this).children('ul').slideDown('slow');
});
$("#nav ul:eq(1)").on("mouseleave", 'li', function(event){
	$(this).children('ul').slideUp('slow');
});

Apparemment l'ancienne méthode pour poser des écouteurs est déprécié.
http://api.jquery.com/on/
Merci à ceux qui m'ont aidé/répondu.