WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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

share|improve this question
This is a CSS/jQuery question, not a WordPress question. – Chip Bennett 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

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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