Mobile dropdown menu won't go away

Question

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?

This is my code:

/* Dropdown Button */
.dropbtn {
    background-color: #948a69;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* The container <div> - 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;
}

<div style="position:absolute; top:15px; left:15px;">
<div class="dropdown">
  <button class="dropbtn"><b>MENU</b></button>
  <div class="dropdown-content">
    <a href="index.html">Velkommen</a>
    <a href="bock.html">Produkter</a>
    <a href="fadol.html">Fadøl</a>
    <a href="historie.html">Historie</a>
    <a href="kontakt.html">Kontakt </a>
  </div>
</div>
</div>

Answer 1

I just had this same issue and found a solution from here:
http://www.cssplay.co.uk/menus/cssplay-ipad-dropdown-menu-fixed.html

The fix centers around using a transparent image to force the browser behavior we want. Add this CSS:

// For the Safari mobile browser
div img.close {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: -1;
}

div button:hover + img {
  display: block;
}

Then add this in your HTML, before your last </div>:

<img class="close" src="ipad/trans.gif" />

I personally am using this with lists rather than buttons, so there might be some tweaking necessary. But I can confirm it works using lists (<ul> and <li> based menu).