Transition "de haut en bas" "déroulant"

Bonjour à tous
J'ai beau chercher depuis deux heures sur le web je ne trouve pas ce que je cherche... des trucs similaires oui mais qui ne s'adapte pas à mon cas.

J'aimerais que mon menu, au survol, passe sur un fond de couleur (une couleur pour chaque <li> du menu). Jusque là ok, j'utilise les transitions. Le truc c'est que j'aimerais que ce fond de couleur apparaisse de haut en bas, comme si le fond se déroulait... et non d'un seul bloc.
J'ai déjà vu ça quelque part, je sais donc que c'est possible, sauf que je ne retrouve plus le site en question...

J'espère être claire... Merci !
Sonia

Un truc comme ça ?
http://dabblet.com/gist/4596652

ou avec des images ?
http://dabblet.com/gist/4596676

linear-gradient /transition et chrome ne fond apparemment pas l'affaire.

++

Plus comme le premier oui.
J'ai trouvé un site qui a un effet similaire dans son menu :www.monokroom.com
Sauf que le leur est bien plus compliqué je pense vu que c'est plus une sorte de roulement (effet très sympa aussi d'ailleurs, je ne comprends pas très bien dans leur code leur technique, je débute en web, si tu sais faire ça m'intéresse aussi ).
A la base, je pensais plus à la typo qui ne bouge pas et le fond couleur qui se glisse comme sur ton premier lien, au lieu d'apparaître de nulle part.

leur technique se base sur un sprite CSS en image de fond que l'on deplace.

Pour du texte , on peut se passer d'image et avoir un truc similaire: http://dabblet.com/gist/4599070 avec quelques contrainte de codage (title = texte du lien).

Merci beaucoup pour ces liens, je vais essayer d'appliquer ça !