Drop down list issue 
<p><strong>Html</strong></p>

<pre><code>   &lt;a id="btn" class="btn" href="#."&gt;&lt;/a&gt;
   &lt;div id="main-dropdown" class="hide"&gt;
       &lt;ul id="dropdown"&gt;
          &lt;li&gt;&lt;a href="/"&gt;Back &lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/foo"&gt;Foo &lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/bar"&gt;Bar &lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/baz"&gt;Baz &lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/no"&gt;No Bar &lt;/a&gt;&lt;/li&gt;
       &lt;/ul&gt;
   &lt;/div&gt;
</code></pre>

<p><strong>Jquery</strong></p>

<pre><code>$(".btn").click(function(e) {
    e.preventDefault();
    $("#main-dropdown").removeClass('hide');
    $("#main-dropdown").addClass('show');
    return false;
});

$("#dropdown").mouseup(function() {
    return false
});

$(document).mouseup(function(e) {
    if($('#main-dropdown').hasClass('show')) {
        $("#main-dropdown").removeClass('show');
        $("#main-dropdown").addClass('hide');
        return false;
    }
    $("#main-dropdown").removeClass("show");
    $("#main-dropdown").addClass("hide");
});
</code></pre>

<p>Problem:
When I click on the href (id = btn) a drop down comes but when I again click on that button is should hide 
which is not happening. Where i am doing wrong.</p>
