bonjour à tous!

Je m'explique car mon intitulé de post n'est pas très clair (mais j'ai pas trouvé mieux ^^)

J'ai une liste (ul) dont les li contiennent chacun un bouton, ces boutons sont regroupés sous la classe .petitBouton qui est marqués en display:none dans mon CSS.

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
<ul id="menuHaut">
	           <li><button id="a" class="petitBouton">a</button></li>
		<li><button id="b" class="petitBouton">b</button></li>
		<li><button id="c" class="petitBouton">c</button></li>
		<li><button id="d" class="petitBouton">d</button></li>
	</ul>
Je voudrais que lorsque je passe ma souris sur un des li, le bouton qu'il (elle?) contient subisse un slideUp.

J'ai essayé avec le code suivant:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
$("ul#menuHaut li").mouseover(function(){
			$(this).children("button").slideUp(50)
		});
Forcément, il ne se passe foutrement rien...
Alors bon, je découvre tout juste jQuery, donc je me doute qu'il doit il y avoir une bonne grosse bêtise là dedans.
Déjà, est-ce que le "button" peut être passé dans children?
Ensuite, dois-je utiliser this ou li.selected?

Enfin bref, vous l'aurez compris, j'ai besoin d'aide !!

Merci d'avance!