Menu déroulant "exotique" en CSS Fermé

Question

Bonjour à tous !
encore un petit aléa dans la conception de mon site : le menu.

voici où j'en suis (ne vous étonnez pas, il n'y a que le menu et c'est normal) :
http://niquedouille.free.fr/test/menu.html
le bouton "collections" est celui sur lequel je test, les autres fonctionneront sur le même principe

2 choses qui ne vont pas comme je veux :
- lorsque l'on passe la souris sur le bouton "collections", il s'affiche bien en noir, mais quand on descend sur la partie déroulante du menu (le sous-menu), le bouton "collections" ne reste pas affiché en noir. Je n'ai pas trouvé comment faire pour qu'il le reste.

- vous comprenez bien l'effet que je souhaite réaliser au niveau du sous-menu, avec la petite barre noire sur le côté gauche. Je m'y prend peut être mal : la "barre" sur le côté gauche, est en fait une bordure de 6px. J'ai un peu triché, pour que lorsque l'on passe la souris sur le 2e élement du sous-menu, on voit la bordure aussi bien à gauche du 2e élement que du 1er. De même pour le 3e element : on voit la bordure à gauche des élements 1, 2 et 3. 
En fait, non : la boite du 3eme élement change au passage de la souris, pour une boite dont la hauteur correspond à celle des boites 1 + 2 + "3". Ainsi, l'affichage est juste et l'utilisateur n'y voit que du feu. 
Problème : quand on passe le curseur sur le 3e élement (ou 2e), on ne peut plus acceder au 2e élement. J'ai essayé de jouer avec la propriété z-index, mais cela n'a rien changé à l'affaire.



Merci beaucoup à tous pour votre aide !
jb

niquedouille · Answer

toujours au même point :-(
pourtant, mes z-index sont bien sur des objets qui sont positionnés (en relative).. surement un petit détail que je n'ai pas saisit.

niquedouille · Answer

pas eu de réponse, mais je me répond moi même car j'ai trouvé la solution :-) je m'y étais donc mal pris au niveau de la structure du menu. J'ai rechangé ainsi :

position relative
position relative
#sousmenu

ainsi, la navigation est beaucoup plus naturelle puisque le menu reste affiché tant que la souris est sur la balise

qui comprend le bouton ET le sous menu. Pour la petite barre qui défile, j'ai utilisé une div positionnée en absolu, de 6px de large et d'une hauteur qui varie en fonction du niveau 1, 2 ou 3 du sous menu. Par defaut, display:none et quand on passe sur un lien, display:block. Si ce n'est pas clair je vous laisse voir le code ;) http://niquedouille.free.fr/test/menu2.html bien sur, il reste à mettre tout ça en forme, mais ça va être un jeu d'enfant maintenant :) :)

Menu déroulant "exotique" en CSS

2 réponses

Discussions similaires