hover menu et setTimeOut prototype

[Nelieru]

Bonjour à tous,

Voila voila j'ai un souci en Prototype et je requiert votre aide, je vous explique.
J'ai un menu possédant un sous-menu, et ce que je veux faire c'est lorsqu'on effectue un hover sur sur le menu, qu'il y ait un temps d'attente d'environ 2 secondes et que le sous-menu s'affiche ensuite.

Voila ce que j'ai fait jusqu'à présent :
Structure Prototype :

Code :

1
2
3
4
5
6
7
8
9
10
    $$('.menu').each(function(element){
        element.observe('mouseover',function(){
            window.setTimeout(function() {
                element.addClassName('over');
            },1000);
        })
        element.observe('mouseout',function(){
            element.removeClassName('over');
        });
    });

Structure HTML :

Code :

1
2
3
4
<div class="menu">
    <div class="sous-menu"></div>
</div>
// Quand le menu a une classe over, le sous-menu s'affiche.

Le problème, c'est que ds que je quitte le bouton du menu pour accéder au sous-menu, le hover s'enlève et se remet, et du coup lance un nouvel évènement mouseover avec 1 seconde d'attente...