I have an HTML item for a 'drop down menu', structured like this...

            <li class="ui-dropdown-list" >
                <a href="#">Right Drop Down Menu</a>
                <ul>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                </ul>
            </li>

Using jQuery to make this a dropdown list, with the following code.

jQuery.fn.dropdown = function () {

    var defaults = {
        button: null,
        menu: null,
        visible: false
    };
    var options = $.extend(defaults, options);

    return this.each(function () {
        options.button = $(this);
        options.menu = $(this).find("ul");

        // when the parent is clicked, determine whether dropdown needs to occur
        options.button.click(function () {
            options.visible ? lift(options.menu) : drop(options.menu);
            options.visible = !options.visible;
        });

        // drop the menu down so that it can be seen.
        function drop(e) {
            options.button.addClass("open");
            options.menu.show();
        }
        // lift the menu up, hiding it from view.
        function lift(e) {
            options.menu.hide();
            options.button.removeClass('open');
        }

    });
};

I am trying to wire it up so that if the user clicks anywhere outside of the menu, it will collapse it. This is proving much more difficult than I anticipated; even trying to use page level events. Any suggestions?

The menu itself never really 'receives' focus, so using .blur doesn't seem to be suiting the purpose.