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:

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

  • This is a CSS/jQuery question, not a WordPress question. Oct 31 '11 at 14:29

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:

  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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.