title: jQuery - Hide a div menu after clicking outside div
body: <p>I've build a drop down menu at:</p>
  
  <p><a href="http://www.ourbridalsongs.com/new_header/header.php" rel="noreferrer">http://www.ourbridalsongs.com/new_header/header.php</a></p>
  
  <p>When you click on the up/down arrow next to the logo - the menu appears - I'd like to make it disappear when clicking anywhere else on the screen - for some reason it's getting stuck and doesn't slide back up.</p>
  
  <p>Can anyone help resolve this!</p>
  
  <p>Here's my script:</p>
  
  <pre><code>$(document).ready(function () {
  
      $("ul.subnav").parent().append("&lt;span&gt;&lt;/span&gt;");
      $("ul.topnav li span").click(function () {
          $(this).parent().find("ul.subnav").slideDown('slow').show();
          $(this).parent().click(function () {}, function () {
              $(this).parent().find("ul.subnav").slideUp('slow');
          });
      }).hover(function () {
          $(this).addClass("subhover");
      }, function () {
          $(this).removeClass("subhover");
      });
  
  });
  </code></pre>
  
  <p>Thanks!!!</p>