Just put this at the end of your page, before the
</body> tag. The minified script:
Source & Demo
See this jsfiddle for the complete, readable source and demo.
- tiny code (~0.5k)
- painless to integrate - just add it to your page, done. No config or init needed.
- Menus drop down after a short delay of 200ms (adjustable) to avoid flickering
- Works in Chrome, Safari and Firefox, not tested on IE
- Doesn't work properly on iPad Mobile Safari (should turn it off there because there's no hover state on touch devices)
How it works
Very simple. On
mouseenter, the script sets a timer that adds the
open class to the dropdown after 200ms. On
mouseleave, the timer we set in
mouseenter is removed so it doesn't actually fire, and we remove the
open class again.