Solving multiple-animation instance issue on jQuery slideToggle

Here is my test website:
http://beta.stoneridgeretirement.com

The drop-down navigation menu at the top is handled with this function:

$('ul#nav1 li').on('mouseenter mouseleave', function(){
	$(this).children('ul').slideToggle(100);
});

Select allOpen in new window

In general, it works great, and is obviously very simple. However, it is possible to make it malfunction by moving your mouse very quickly from the main (blue) button/link, downward to where the drop-down menu appears. If you do it "just right", the drop-down menu will repeatedly slide up and down, a whole bunch of times, before finally stopping.

I have handled this kind of thing in the past using a variety of methods, most often by setting a variable that says "animation is on" and setting it back to "animation is off" after the animation completes. But I'm not sure that will work in this case, at least not using slideToggle.

My current function is so simple, I hate to make a mess of it by over complicating the code. Yet, not sure I can avoid that. I'm not even exactly sure "why" the problem exists, or what is being triggered exactly when you move the mouse in that way, etc.

Would appreciate any insight into a possible solution. This kind of thing comes up a lot with jQuery animations.

Thank you.