title: Mobile dropdown menu won't go away
body: <p>I have this dropdown menu, for my mobile site. The problem is, it will not go away when clicking outside of the dropdown menu. So when clicking the button, there is no way of getting rid of the menu again, besides choosing one of the other sites from the menu. Is it possible, when it shows, to make it go away if you click outside of it?</p>
  
  <p>This is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Dropdown Button */
  .dropbtn {
      background-color: #948a69;
      color: white;
      padding: 16px;
      font-size: 16px;
      border: none;
      cursor: pointer;
  }
  
  /* The container &lt;div&gt; - needed to position the dropdown content */
  .dropdown {
      position: relative;
      display: inline-block;
  }
  
  /* Dropdown Content (Hidden by Default) */
  .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  }
  
  /* Links inside the dropdown */
  .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
  }
  
  /* Change color of dropdown links on hover */
  .dropdown-content a:hover {background-color: #f1f1f1}
  
  /* Show the dropdown menu on hover */
  .dropdown:hover .dropdown-content {
      display: block;
  }
  
  /* Change the background color of the dropdown button when the dropdown content is shown */
  .dropdown:hover .dropbtn {
      background-color: #9e9370;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="position:absolute; top:15px; left:15px;"&gt;
  &lt;div class="dropdown"&gt;
    &lt;button class="dropbtn"&gt;&lt;b&gt;MENU&lt;/b&gt;&lt;/button&gt;
    &lt;div class="dropdown-content"&gt;
      &lt;a href="index.html"&gt;Velkommen&lt;/a&gt;
      &lt;a href="bock.html"&gt;Produkter&lt;/a&gt;
      &lt;a href="fadol.html"&gt;Fadøl&lt;/a&gt;
      &lt;a href="historie.html"&gt;Historie&lt;/a&gt;
      &lt;a href="kontakt.html"&gt;Kontakt &lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>