onClick dropdown

HTML

<ul>
    <li class="dropdown"><a href="http://google.com/" target="_blank">DropDown</a>
        <ul>
            <li><a href="http://google.com/" target="_blank">sub menu item 1</a></li>
            <li><a href="#">sub menu item 2</a></li>
        </ul>
    </li>
</ul>


<p>aaaaaaaaaaaaaaaaaaaaaaaaa aa </p>

CSS

.hidden {display:none}
body {padding: 3em}

JavaScript

$.fn.dropDown = function (hiddenClass) {
    var that = this;
    $('html').click(function () {
        that.each(function () {
            $(this).find('ul').addClass(hiddenClass);
        });
    });    
    return this.each(function () {
        var $this = $(this);
        $this.data('dropDownTrigger', true);
        $this.find('ul').addClass(hiddenClass);
        $this.click(function (e) {
            $(this).find('ul').toggleClass(hiddenClass);
            e.stopPropagation();
            if ($(e.target).parent().data('dropDownTrigger')) {
                e.preventDefault();
            }
        });
    });
}
    
$('.dropdown').dropDown('hidden');