I have a simple unordered list of links that I want to animate. But I can't remember how, using jQuery, I should ensure that the UL stays showing when I move the cursor over it. The problem is that I have position: relative on the container, and absolute on the UL (I need this for z-index purposes). So, when the UL appears, the container height does not change, given the UL is "out of the page flow".
<div id="the_ul_container"> <h6>hover me</h6> <ul id="the_ul"> <li>...</li> </ul> </div> $('#the_ul_container') .show() .hover(function() { $('#the_ul').show('slow'); },function() { $('#the_ul').hide('fast'); }); When the cursor moves onto the UL, it begins toggling without letup. Is my best option to use setTimeout in the second function?