CSS Dropdown Menu pour rester visible au mouse out

Question

Quelqu'un peut-il faire la lumière sur la meilleure façon de le faire?

J'ai créé un menu déroulant CSS basé sur le fils de suckerfish. Je veux l'améliorer légèrement avec JS de sorte que sur le mouseout le <ul> qui devient visible sur la souris reste alors sur l'écran pendant quelques secondes.

Voici un lien vers le menu Faux CSS Dropdown

http://www.eagleworks.co.uk/test/cssdropdown/

Tous les liens ou des conseils serait génial.

Merci à tous

Answer 1

Vous pouvez le faire en utilisant un délai d'expiration.

Quelque chose comme ce qui suit devrait fonctionner:

Créer une variable globale: var theTimeout = null;

modifier ensuite le mouseout et mouseover pour activer et désactiver le délai d'attente respectivement.

sfEls[i].onmouseover=function() { 
    clearTimeout(theTimeout); 
    this.className+=" sfhover"; 
} 
sfEls[i].onmouseout=function() { 
    var self = this; 
    theTimeout = setTimeout(function(){ 
     self.className=this.className.replace(new RegExp(" sfhover\\b"), ""); 
    },2000); 
} 

Si vous avez plus d'un de ces menus déroulants sur la page, alors vous aurez besoin d'un tableau de temps morts pour que vous ne les écrasez pas à chaque fois que vous ouvrez un autre menu.