Menu vertical déroulant CSS

Bonjour à tous,

Je me prends la tête depuis plusieurs jours sur un problème de menu. J'ai testé plusieurs solutions mais sans grand résultat alors je me demande si ce que j'envisage de faire est techniquement réalisable. J'ai mis en pièce jointe l'image de ce que je souhaite faire.

Au chargement de la page le bouton du menu ressemble à une goutte et lorsque l'utilisateur clique dessus les sous-menus se déroulent (en JS) dans un cadre d'une couleur apparentée.

J'ai essayé pas mal de solutions et pour obtenir ce que je voulais, j'ai dû changer l'image de la goutte lorsque les sous-menus sont déroulés pour ne pas perdre la transition. Le problème avec cette solution c'est l'image qui apparait met une seconde à s'afficher ce qui casse l'effet déroulant. Je ne sais pas si je suis bien claire dans mes explications alors j'ai mis le code source html, css et les images en pièce jointe aussi.

Si vous pouviez m'indiquer une piste pour un joli rendu sans cassure. Sinon je vais devoir revoir le design du menu et j'avoue que ça ne m'enchante guère.

Merci beaucoup à tous pour vos conseils

j'avoue avoir la flemme de lire le code mais à mon sens l'idée est bonne html/css devrait suffire. si ton image met trop de temps à charger c'est peut être qu'elle est trop lourde.après la seconde solution envisageable est d'utiliser flash pour générer ton menu.

Bonjour Vil'Coyote,

Merci pour ta réponse mais l'image n'est vraiment pas trop grosse (3 ko). J'ai même essayé de remplacer l'image par une couleur de fond uniquement donc sans image.

J'ai mis les images en pièces jointe des résultats que j'obtiens :
Si je met 2 images (image 5 de 2.41ko et image 4 de 2.58ko) de la goutte et du fond de sous-menu j'obtiens ce qui est sur l'image 3. Ce n'est peut-être pas bien visible ici en miniature mais on voit une séparation entre les deux qui n'est pas jolie. C'est bien le résultat que j'attends mais le rendu n'est pas joli.

Autre solution : si je met juste l'image de la goutte (image 5) et une couleur de fond pour le sous-menu j'obtiens les images 1 et 2 selon la valeur que je donne à mon margin top.
En gros, serait-il possible sur le résultat de l'image 1 de faire passer l'image de la goutte au premier plan ?

Merci beaucoup

je pense que pour cela il faudrait encapsuler ton image dans un div et utiliser le z-index pour la passer en premier plan.

Merci beaucoup, je ne connaissais pas encore cette propriété z-index. Je fais les test et je te tiens au courant.

Merci encore

Bonsoir,

Après avoir fait mes tests, la propriété z-index était bien ce qu'il me fallait. Merci Vil'Coyote pour ce tuyau ! :ccool:
Entre temps j'avais modifié un peu ma charte graphique et finalement j'aime bien ma dernière version mais je garde à l'esprit cette propriété fort utile.

Merci encore :P