Bien le bonjour...

J'ai réalisé un menu déroulant en usant de CSS3. Voila sa trombine :

En mettant le pointeur sur l'item3, la bulle rouge (sous menu) descend. La flèche rouge pointe sur l'item2 au lieu de l'item3, c'est un décalage, mais en rien le problème posé ici.

Le vrai problème a lieu durant la remonté de la bulle rouge (mon sous menu donc). Si je garde le pointeur sur item3, la bulle reste en place (normal). Si je vais sur la bulle, elle reste encore en place (toujours logique). Si je vais sur les item1, 2, 4 elle doit remonter en toute logique là aussi.

Le problème est qu'en remontant, le pointeur "capte" les sous-item de la bulle rouge qui redescend alors, pour remonter quand ils ne sont plus sous le pointeur, puis redescendre, etc... Bref ça oscille, c'est très désagréable et pas propre.

Je voulais donc savoir s'il existait une combine pour éviter que le pointeur ne capte le sous menu dans sa remonté.

Je voudrais cependant :

• Éviter de changer la nature du déplacement du sous menu.
• Éviter de faire passer le sous menu sous le menu (comme ça se fait couramment).

Merci si vous avez une petite piste à me communiquer.

Bonsoir.
Sans page d'exemple, c'est un peu difficile à comprendre et donc à debugger.
C'est un menu 100% en css sans js ?

Bonsoir.

Je ne voyais pas l'intérêt de montrer le CSS dans ce cas précis. J'utilise

J'ai usé uniquement du préfixe pour Opera pour le moment étant donné que c'est mon seul navigateur qui prend en charge CSS3. Le site n'est pas hébergé pour le moment.

Donc non, il n'y a pas de JS pour le menu. Uniquement du CSS3.

Cet exemple semble fonctionné correctement : http://jsfiddle.net/nVZwB/8/

Oops...

Merci pour l'exemple mais dedans mon problème ne se pose pas étant donné qu'ici les items des menus enfants sont de même largeur que les items parents. J'aurais du y penser, c'est en remplaçant les item par leur norm final que le problème se pose de manière évidente.

Alors la bulle rouge passe entre le menu noir et le pointeur, le pointeur accroche les items de la bulle qui redescend avant de remonter, etc...

Ok je vois. Tu peux poster un morceau du code html du menu ?

C'est un peu (beaucoup) le bordel mon code là.
 
On va faire plus simple. Je vais y mettre de l'ordre, et mettre en ligne le site (et son bug) dans une ou deux semaines. Je remonterai alors ce sujet.

Donc me revoila et mon site : http://www.chambre-noire.net/
 
Comme on peut le voir le menu descend bien lorsque l'on pointe l'item "tutoriels". Mais dès que l'on passe le pointeur sur galerie par exemple, la remontée du sous menu est difficile. C'est normal à la vue du code mais évidement non souhaité. Il y a une astuce pour éviter ça ?

Dernier petit up : personne n'a d'idée ? (sans avoir à modifier l'apparence)
 
Sans quoi je laisserai l'animation pour la descente et je supprimerai l'animation en remontée.

Drapo pr regarder le code demain quand je serais sur le Mac, sur iPhone cay plus compliqué ^^

Essaye ça:
 

 
Cependant tu pourrais facilement simplifier et optimiser ton code HTML et ton CSS, en n'appellant que les éléments au lieu de leur assigner un ID. Les ID sont surtout utile pour les ancres et le JS.
 
Par exemple:
 
.header ul li a:hover

 
 
Je n'ai pas plus de succès avec un  
 

Ça ne fait d'ailleurs même pas baisser le sous menu. Avec :

Le problèmes est le même que celui de mon premier post (logique donc).  

C'est alambiqué mais je m'y retrouve mieux comme ça.  
 
Il y a une différence de perf ?
 
Merci en tout cas, je crains qu'il n'y ai pas de solution, l'effet étant parfaitement normal.

Peut-être en essayant avec les pseudo classes apparues avec le CSS3 mais j'y crois moyen...
 
Sinon au niveau des perfs non il n'y aura pas de différences au niveau performance mais c'est surtout pour moins se faire chier avant pendant et après.
 
Par exemple, tu peux découper chaque partie du site en:
 
- header
-section 1
- section 2
- section 3, etc...
- footer
 
Dans ton CSS:
 
Tu n'appelle que la classe ou le type d'élément que tu veux mettre en forme suivi des éléments enfants, par exemple pour modifier la couleur du lien contenu dans les puces de ton menu situé dans le header:
 

 
Mais pour cela il faut que dans ton code HTML le header ressemble à ça:
 

 
Oui bien créer une règle commune pour chaque section:
 

Au fait, merci pour ton message. J'avais oublié de revenir la dessus.  
 
Peut être ajouterai je une couche de JS pour résoudre mon problème.