Q:

when i click again the it display none and height back to 0px but the element inside shows and does not display none or leave the page

This menus, when you clicked they drop down and displayed the specific menu block and click the menu again i displayed it none and click white space on the page or other menu the specific menu that you open will closed. 
But...
The Problem is when the specific menu is 'onclick' and displayed block, height = 390px and when i click again the it display none and height back to 0px but the element inside shows and does not display none or leave the page... why??
Code:
*<!--html markup-->
<header class="top">
<nav class="nav">
    <ul class="nav-menus">
        <li id="menu_1">
            <a href="#" onclick="document.getElementById('a').style.display = 'block';">a</a>
            <section id="a" class="dropMenus"><h1>A</h1></section>
        </li>
        <li id="menu_2">
            <a href="#" onclick="document.getElementById('b').style.display = 'block';">b</a>
            <section id="b" class="dropMenus">B</section>
        </li>
        <li id="menu_3">
            <a href="#" onclick="document.getElementById('c').style.display = 'block';">c</a>
            <section id="c" class="dropMenus">C</section>
        </li>
        <li id="menu_4">
            <a href="#" onclick="document.getElementById('d').style.display = 'block';">d</a>
            <section id="d" class="dropMenus">D</section>
        </li>

    </ul>
</nav>

.nav-menus .dropMenus{
    position: absolute;
    display: none;
    top: 90px;
    left: 0;
    width: 100%;
    background: rgba(255, 170, 0, 0.1);
    z-index: 1;
    box-shadow: 2px 2px 2px #888;
}

//javascript

var boxArray = ['a', 'b', 'c', 'd'];

window.addEventListener('mouseup', function drop(event){
    for(var i=0; i < boxArray.length; i++){
        var box = document.getElementById(boxArray[i]);
        var  maxH = '390px';
        if(event.target != box && event.target.parentNode != box){
            if(box.style.height == maxH && box.style.display === 'block'){  
                    box.style.display = 'none'; 
                    box.style.height = '0px'; 
                } else {
                    box.style.height = maxH;
                }
        }
    }
});

Heres the output
![PAGE LOADED][1]
[1]: http://i.stack.imgur.com/5oEef.png

![MENU CLICKED AND DROP DOWN][2]
 [2]: http://i.stack.imgur.com/eWsGH.png

![MENU CLICKED BACK UP BUT PROBLEM OCCURRED][3]
 [3]: http://i.stack.imgur.com/qVwjQ.png

A:

I have taken liberty of updating your code.
JSFiddle

function updateUI(element) {
  var dropMenus = document.getElementsByClassName('dropMenus');
  var el = document.getElementById(element);
  var show = el.style.display == 'none' ? true : false;

  for (var i in dropMenus) {
    if (!isNaN(i)) {
      dropMenus[i].style.height = '0px';
      dropMenus[i].style.display = 'none';
    }
  }
  if (show) {
    el.style.height = '390px';
    el.style.display = 'block';
  }
}
body {
  margin: 0;
  border: none;
  padding: 0;
}

.top {
  margin: 0 auto;
  overflow: hidden;
}

.nav {
  margin: 0 auto;
  border: none;
  padding: none;
  width: 100%;
  height: 90px;
  float: left;
  background: #e69900 url(http://dot.spindev.ph/wp-content/themes/fun/images/planner/imgright.png) no-repeat;
  background-size: 1366px 90px;
  font: 18px sans-serif, 'arial';
}

.nav li {
  display: inline;
}

.nav li a {
  text-decoration: none;
}

.nav > .logo a {
  text-decoration: none;
  float: left;
  font-size: 30px;
  margin: 30px 50px 20px 50px;
  color: #fff;
}

.nav > .nav-menus a {
  margin-top: -15px;
  padding: 30px 24px 25px 24px;
  float: left;
  color: #fff;
  transition: background 0.9s, linear 0s, color 0.9s, linear 0s;
  -o-transition: background 0.9s, linear 0s, color 0.9s, linear 0s;
  -webkit-transition: background 0.9s, linear 0s, color 0.9s, linear 0s;
  -moz-transition: background 0.9s, linear 0s, color 0.9s, linear 0s;
}

.nav > .nav-menus a:hover {
  background: rgba(179, 119, 0, 0.4);
  border-bottom: 10px solid #ffbb33;
  color: #fff;
}

.nav-menus .search {
  float: right;
  margin-right: 20px;
}

.nav-menus > .nav-icon {
  padding: 2px 5px;
  border: 1px solid #000;
  float: left;
  display: none;
}

.nav-menus > .nav-icon > div {
  width: 20px;
  height: 4px;
  background: #333;
  margin: 3px 0px;
  border-radius: 4px;
}

.nav-menus .dropMenus {
  position: absolute;
  display: none;
  top: 90px;
  left: 0;
  width: 100%;
  background: rgba(255, 170, 0, 0.1);
  z-index: 1;
  box-shadow: 2px 2px 2px #888;
}
<header class="top">
  <nav class="nav">
    <header class="logo">
      <a href="#">it's more fun</a>
    </header>

    <ul class="nav-menus">
      <div class="nav-icon">
        <div></div>
        <div></div>
        <div></div>
      </div>

      <li id="menu_1">
        <a href="#" onclick="updateUI('philippines')">philippines</a>
        <section id="philippines" class="dropMenus">
          <h1>A</h1></section>
      </li>

      <li id="menu_2">
        <a href="#" onclick="updateUI('thingsToDo')">things to do</a>
        <section id="thingsToDo" class="dropMenus">B</section>
      </li>

      <li id="menu_3">
        <a href="#" onclick="updateUI('topDestinations')">top destinations</a>
        <section id="topDestinations" class="dropMenus">C</section>
      </li>

      <li id="menu_4">
        <a href="#" onclick="updateUI('planningYourTrip')">planning your trip</a>
        <section id="planningYourTrip" class="dropMenus">D</section>
      </li>

      <li class="search"><a href="#">search</a></li>
    </ul>
  </nav>
</header>

