[Résolu] Décaler un seul <li> d'une liste <ul> ?

Bonsoir à tous,

Alors voilà, je suis en train de finaliser la création de mon portfolio mais ce que j'avais en tête semble un peu compromis.
En fait, j'ai un menu horizontal composé d'une liste dont chaque <li> est en "inline-block".
Dans chaque <li> j'ai un lien <a>. Et enfin, chaque lien a une image en background.

Au final, j'obtiens ça (ne pas faire gaffe à la barre et au coulures):
http://img15.hostingpics.net/pics/181696menu.jpg

Ce que j'avais en tête c'est que lorsque je survole un bouton, il se soulève "pour sortir du rang" si vous voulez. Du coup on le verrait en entier.

Comment faire ?

La seule solution serait de foutre tous les liens en "position absolute" et de jouer sur le "bottom: X px" mais quand je mets tous les boutons en absolute, je ne sais meme pas où ils se trouvent sur la page. Tout part en sucette xD (à noter qu'il s'agit d'un site ONE PAGE)

Donc avant de recommencer mon menu en utilisant une autre méthode qu'une liste, je souhaitais savoir s'il y avait une solution pour simplement faire une "transition animée vers le haut d'un <li>".

Cordialement
Modifié par dimC (08 Apr 2013 - 01:35)

si tes li sont en inline-block, tu peut jouer avec le vertical-align et line-height.
Par exemple : http://dabblet.com/gist/5333194
++

Finalement j'ai réussi en retentant mes premiers essais. J'avais juste oublié de mettre un "position:relative" sur chaque <a> de chaque <li> afin de jouer ensuite sur le "top: -X px". Ton idée de "vertical align" m'a mis sur la bonne voie.

Merci et bonne continuation
Modifié par dimC (08 Apr 2013 - 08:38)