title: JS menu, close menu on menu click
body: <p>i am trying to create a menu with JS, when i click on the first menu item and it is open, then i want when i click on the next item i want the first one to close and the second one to open and when i am clicking on the open menu item i want it to close. also when i click anywhere if i can make it close as well... 
  here the code i have 
  HTML </p>
  
  <pre><code>&lt;div class="container-header"&gt;
    &lt;div class="navbar"&gt;
      &lt;ul&gt;
        &lt;li&gt;
          &lt;a onclick="dropdownToggle(event)"&gt;&lt;span&gt;Products&lt;/span&gt;&lt;/a&gt;
          &lt;div class="dropdown"&gt;
            &lt;ul class="submenu-img"&gt;
              &lt;li&gt;&lt;a&gt;&lt;img src="2015_images/img.png"&gt;title&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a&gt;&lt;img src="2015_images/img.png"&gt;title&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a&gt;&lt;img src="2015_images/img.png"&gt;title&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a&gt;&lt;img src="2015_images/img.png"&gt;title&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a&gt;&lt;img src="2015_images/img.png"&gt;title&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a onclick="dropdownToggle(event)"&gt;&lt;span&gt;Services&lt;/span&gt;&lt;/a&gt;
          &lt;div class="dropdown"&gt;
            &lt;ul class="submenu"&gt;
              &lt;li&gt;&lt;a&gt;item&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a&gt;item&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a&gt;item&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a&gt;item&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a onclick="dropdownToggle(event)"&gt;     &lt;span&gt;Softwares&lt;/span&gt;&lt;/a&gt;
          &lt;div class="dropdown"&gt;
            &lt;ul class="submenu"&gt;
              &lt;li&gt;&lt;a&gt;item&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a&gt;item&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a&gt;item&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a&gt;item&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS</p>
  
  <pre><code>* {
    box-sizing: border-box;
  }
  ul {
    list-style: none;
  }
  
  .navbar {
    width: 100%;
    text-align: center;
    position: absolute;
    top: -500px;
    background-color: #585859;
    transition: top 0.3s;
    z-index: 1;
  }
  @media screen and (min-width: 768px) {
    .navbar {
      line-height: 65px;
      width: auto;
      position: static;
    }
  }
  .navbar ul {
    margin: 0;
    padding: 0;
  }
  .navbar li {
    vertical-align: middle;
    color: #fff;
    padding: 10px;
    border-bottom: 5px solid #fff;
  }
  
  @media screen and (min-width: 768px) {
    .navbar li {
      display: inline-block;
      margin-right: 10px;
      border: none;
      padding: 0;
    }
  }
  .dropdown {
    display: none;
  }
  
  .dropdown-open {
    display: block;
    position: absolute;
    top: 70px;
    left: 0;
    background: rgba(88, 88, 89, 0.7);
    width: 100%;
  }
  .submenu {
    width: 100%;
    display: flex;
    align-items: center;
    flex-flow: row;
    justify-content: center;
    padding: 10px 0 !important;
  }
  .submenu li {
    margin: 0 2px;
    flex: 0 0 12%;
    line-height: normal;
  }
  </code></pre>
  
  <p>and JS </p>
  
  <pre><code>function dropdownToggle(event) {
    var dropdownItem = event.target.parentElement.parentElement.getElementsByClassName("dropdown")[0];
    if (dropdownItem.classList.contains("dropdown-open")) {
      var dropdowns = document.querySelectorAll(".dropdown");
      var arrayLength = dropdowns.length;
       for (var i = 0; i &lt; arrayLength; i++) {
          dropdowns[i].classList.remove("dropdown-open");
        }
      }
  
      else {
        dropdownItem.classList.toggle("dropdown-open");
      }
  }
  </code></pre>
  
  <p>I tried on JSFiddle but it is not working so here is a codepen as well.. 
  <a href="http://codepen.io/nnns/pen/rLvdgE" rel="nofollow">http://codepen.io/nnns/pen/rLvdgE</a></p>