Extend the twentyten dropdown menu with jQuery with a delay onmouseout

Question

I would like to extend the pure CSS dropdown menu of the standard twentyten theme in order to accomodate a small delay on hiding the submenu onmouseout.

Is there any way we could do this using jQuery? I've seen some solutions using hoverIntent:

• jQuery Hoverintent plugin in TwentyEleven Menu

• Improving the Thesis built-in dropdown menu via javascript.

These do not seem to work for me. I have multiple levels of navigation, and the solutions above display all sublevels of the navigation at once (without the delay onmouseout).

Could anyone please help me out? Does a plugin maybe exist for this sort of thing?

Thanks in advance

Answer 1

The solution was very simple! Just use Superfish.js as instructed on http://users.tpg.com.au/j_birch/plugins/superfish/#getting-started

Be sure to include superfish, hoverIntent and jQuery in your wordpress. In your custom js script file, something like this works like a charm:

$('ul#theidofyourmenu').superfish({
  delay:         600,   // This will fire up the hoverIntent
  autoArrows:    false  // Disable this if you don't want arrows on toplevel nav links
}); 

Thanks to @pixeline for his hint on using Superfish.js