views:

60

answers:

2

Hello,

I have created a drop down with JQuery that can be seen here by clicking the Preview button on top:

http://jsbin.com/ubire3/edit

It works fine except for one problem. When i hover over the main hover links (blue ones) quickly eg going horizontally quickly hovering each top menu, the some submenus don't close. How do i make it so that even if i hover fast over them all other submenus are closed?

Edit:

I saw this useful link using some ways to avoid this, but having bit of problems, how to apply that in my case.

http://stackoverflow.com/questions/1058158/can-somebody-explain-jquery-queue-to-me

Thanks.

A: 

Fixed it here: http://jsbin.com/ubire3/3

I don't know why my changes were not reflected @ above link

See it here

i am not using stop method

Rakesh Juyal
@Rakesh: Thanks but the problem is still there, just try hovering from Menu One to Menu Five **quickly**, the submenues of previous heading do not close. Also i don't see any change in the code, wonder what you changed there?
Sarfraz
+2  A: 

Great, finally I solved the problem myself:

All i did was to modify the line:

$('.sublinks').hide();

to

$('.sublinks').stop(false, true).hide();

The stop stopped animations for previous sub menues. You can see the documentation of it on Jquery site.

.

See fixed version here:

http://jsbin.com/ubire3/5/edit

Sarfraz