title: Click out of Dropdown menu won't close it
body: <p>I have been trying to make the dropdown close when someone clicks outside of it, but I can't figure it out. I need it to close when someone clicks outside of either of the dropdowns. I tried window.onclick, but then it wouldn't let me open either dropdown.</p>
  
  <p>Here is my HTML:</p>
  
  <pre><code>&lt;nav&gt;
    &lt;ul class="menuBar"&gt;
      &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" onclick="menuClick('menuAccounts')"&gt;Accounts&lt;/a&gt;&lt;/li&gt;
        &lt;ul id="menuAccounts"&gt;
          &lt;li&gt;Savings&lt;/li&gt;
          &lt;li&gt;Checking&lt;/li&gt;
        &lt;/ul&gt;
      &lt;li &gt;&lt;a href="#" onclick="menuClick('menuLoans')"&gt;Loans&lt;/a&gt;&lt;/li&gt;
        &lt;ul id="menuLoans"&gt;
          &lt;li&gt;Auto&lt;/li&gt;
          &lt;li&gt;Mortgage&lt;/li&gt;
        &lt;/ul&gt;
      &lt;li&gt;&lt;a href="about.html"&gt;About&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Here is my CSS:</p>
  
  <pre><code>nav {
    color: #ffffff;
    background-color: #0000ff;
  }
  .menuBar li{
    display: inline-block;
    text-align: center;
  
  }
  .menuBar li a{
    color: #ffffff;
    text-decoration: none;
  }
  #menuAccounts{
    display: none;
    position: absolute;
    background-color: #0000ff;
    margin: 0 0 0 3em;
  }
  #menuLoans{
    display: none;
    position: absolute;
    background-color: #0000ff;
    margin: 0 0 0 6em;
  }
  #menuAccounts li, #menuLoans li{
    display: block;
    text-align: left;
    padding: 0 1.5em;
  }
  </code></pre>
  
  <p>Here is my JavaScript:</p>
  
  <pre><code>function menuClick (x) {
    var dropMenu = document.getElementById(x);
    var dropAccounts = document.getElementById('menuAccounts');
    var dropLoans = document.getElementById('menuLoans');
    if(x === 'menuAccounts'){
       if(dropMenu.style.display === "none"){
         dropMenu.style.display = "block";
         dropLoans.style.display = "none";
       }else{
         dropMenu.style.display = "none";
       };
    }else if(x === 'menuLoans'){
      if(dropMenu.style.display === "none"){
         dropMenu.style.display = "block";
         dropAccounts.style.display = "none";
       }else{
         dropMenu.style.display = "none";
       };
    }else{
      dropAccounts.style.display = "none";
      dropLoans.style.display = "none";
    };
  };
  </code></pre>