Agir sur un Children qui est display:none

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:

---

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:

---

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!

Quel con...
Avec un slideDown ça va quand même mieux...

Donc, au cas où ça pourrait servir un jour à quelqu'un, voici le code viable:

Code:

---

1 2 3

$("ul#menuHaut li").mouseover(function(){ $(this).children().slideDown(50); });

---