title: Hide menu onClick
body: <p>I have this dropdown menu, that will slideDown whenever my users click on a link. However, I don't know how to make it slideUp, whenever the user click somewhere on the page (Not on the menu of course).</p>
  
  <p>My CSS looks like this:</p>
  
  <pre><code>&lt;li class="da-header-button message"&gt;
      &lt;span class="da-button-count"&gt;32&lt;/span&gt;
      &lt;a href="#"&gt;Notifications&lt;/a&gt;
      &lt;ul class="subnav"&gt;
          &lt;li class="head"&gt;&lt;span class="bold"&gt;Notificatons&lt;/span&gt;&lt;/li&gt;
          &lt;li class="item"&gt;&lt;a href="#"&gt;Under menu&lt;/a&gt;&lt;/li&gt;
          &lt;li class="item"&gt;&lt;a href="#"&gt;Under menu&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>My current jQuery code looks like this:</p>
  
  <pre><code>jQuery("ul.topnav li").click(function() { //When trigger is clicked...  
      //Following events are applied to the subnav itself (moving subnav up and down)  
      jQuery(this).find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click  
      jQuery(this).hover(function() {  
      }, function(){  
          jQuery(this).find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up  
      });  
  });
  </code></pre>
  
  <p>If I edit the last jQuery function from this: <code>jQuery(this).hover(function()</code> to this: <code>jQuery(this).click(function()</code>  it does not work, since it will just slideDown and then up right after.</p>
  
  <p>Thank you for your help.</p>
  
  <p>EDIT:</p>
  
  <p>Thanks guys! But what if I have two of these submenus open at the same time? How can I prevent this?</p>
  
  <p>I only want to allow to have 1 open.</p>