CSS Dropdown Menu to stay visible on mouse out

Can anyone shed any light on the best way to do this?

I have created a CSS dropdown menu today based off the son of suckerfish. I want to enhance it slightly with JS so that on mouseout the <ul> which becomes visable on mouse over then stays on screen for a couple of seconds.

Here's a link to the Faux Dropdown CSS Menu

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

Any links or advice would be awesome.

Th开发者_如何学Pythonanks all

You can do this by using a timeout.

Something like the following should work:

Create a global variable: var theTimeout = null;

Then alter the mouseout and mouseover to set and clear the timeout respectively.

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);
} 

If you have more than one of these dropdowns on the page then you will need an array of timeouts so that you don't overwrite them each time you open another menu.