I am trying to use jQuery UI to produce a dropdown menu. When mouse over the box, the inner div will slide down using jQuery slide(). However, I found that, when the div is sliding down, it is started from the parent div. And finally, it will produce a "jump" to the destination. Furthermore, if my mouse is move away before the animation ended, the box will stopped at the undesired location, and become unrecoverable. If moving the mouse in and out too fast, the div will be missing.
Is there any way to solve it?
This is the sample. (Please refer to the first one, the second one is using the jQuery only).