jquery .blur for entire block of HTML
<p>I have an HTML item for a 'drop down menu', structured like this...</p>

<pre><code>            &lt;li class="ui-dropdown-list" &gt;
                &lt;a href="#"&gt;Right Drop Down Menu&lt;/a&gt;
                &lt;ul&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Item&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Item&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Item&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/li&gt;
</code></pre>

<p>Using jQuery to make this a dropdown list, with the following code.</p>

<pre><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');
        }

    });
};
</code></pre>

<p>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? </p>

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