Question

http://jsfiddle.net/EhTJF/

Linked is an example of the issue I am running into.
When an element is hovered over, slidetoggle() is called to show a drop down list. When attempting to select an option in the ddl, slidetoggle() is called again and forces the ddl and the toggled element to collapse.

Any ideas of what I am doing incorrectly?

*Edit

The indented functionality is to allow a user to select an option from the drop down list and then afterwards allow the element to automatically toggle up.

Answer 1

It’s a bit complicated, but maybe something like this:

$(document).ready(function () {
    var timer;
    $('.dropdown').on({
        mouseenter: function () {
            var elm = $(this).find('.sub_navigation');
            if (!elm.is(':visible')) {
                elm.slideDown(100);
            }else{
                clearTimeout(timer);
            }
        },
        mouseleave: function() {
            var elm = $(this).find('.sub_navigation');
            timer = setTimeout(function() {
                elm.slideUp(100);
            }, 300);
        }
    });
});​

FIDDLE