Question

so I am using the .hover feature of jquery.. but im having a small issue. the drop downs stick and dont get hidden when yuo move the mouse over them very quickly (ff3). it seems like it is skipping the mouse out function if the previous function hadnt completed which is slideDown. anyway to fix this?

heres the test site: http://vasoshield.xcsit.com/index.html

the javascript:

 $(document).ready(function() {
    $('#mainNav ul li').hover(  
        function() {
            $(this).find('ul').slideDown(500);
        },
        function () {
            $(this).find('ul').hide(0);
        }
    );      
 });

menu html

<div id="mainNav">
    <ul>
        <li class="requestInfoLink">
            <a href="#">Request Info</a>
            <ul>
                <li><a href="#">Ordering</a></li>
                <li class="last"><a href="#">Contact Us</a></li>
            </ul>
        </li>   

        <li class="newsLink">
            <a href="#">News</a>
            <ul>
                <li class="last"><a href="#">Press Release</a></li>
            </ul>
        </li>
        <li class="productLink">
            <a href="#">Product</a>
            <ul>
                <li><a href="#">Overview</a></li>
                <li><a href="#">Physician</a></li>
                <li class="last"><a href="#">Patient</a></li>
            </ul>
        </li>               

    </ul>
</div>  

Answer 1

Try hiding them in the $(document).ready for a start.

If not, then why not try .slideToggle()

I’m sure it’s something small and dumb. Just try different things. I’d try the .slideToggle() first though. Or just .toggle()

Edit:
I don’t think the browser is liking the other function() on the hover.

Try making a blur event where it slides up. Should make for a more smooth and nicer looking result.