title: Hide navigation menu after click
body: <p>I built a navigation menu that works well, however it stays on until the mouse moves out of the dropdown.</p>
  
  <p>I already have a function that displays content in another <code>&lt;div&gt;</code> (otherDiv) when we select something in the menu and I'm trying to have it hide the menu at the same time.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function go(obj) {
    var page = obj.href;
    document.getElementById('otherDiv').innerHTML = '&lt;img src="' + page + '"&gt;&lt;/img&gt;'
    return false;
    document.getElementById('menu1').style.display = "none";
    document.getElementById('menu2').style.display = "none";
    document.getElementById('menu3').style.display = "none";
    document.getElementById('menu4').style.display = "none";
    document.getElementById('menu5').style.display = "none";
    document.getElementById('menu6').style.display = "none";
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    .drpbtn {
   display: inline-block;
   color: #ffffff;
   text-align: center;
   padding: 12px 25px;
   list-style-type: none;
   width: auto;
   margin: 0;
   background-color: #403e3e;
   color: #ffffff;
   float: left;
   font-family: arial;
   font-size: 14px;
  }
  
  .drpbtn:hover {
   background-color: #00b3be;
  }
  
  .drpbtn:hover .dropdown-content {
   display: inline-block;
  }
  
  .dropdown-content {
   display: none;
   list-style-type: none;
   position: absolute;
   background-color: #fafafa;
   width: 290px;
   color: #000000;
   text-align: left;
   margin-left: -4.7em;
   margin-top: 0.89em;
  }
  
  .dropdown-content li:hover {
   background-color: #e1e1e1;
  }
  
  .dropdown-content li {
   display: block;
  }
  
  .li-drop {
   display: inline-block;
   color: #000000;
   text-align: left;
   padding: 11px 13px;
   text-decoration: none;
   margin: auto;
  }   </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="menu"&gt;
    &lt;ul&gt;
      &lt;li class="drpbtn"&gt;Menu 1
        &lt;ul id="menu1"&gt;
          &lt;div class="dropdown-content"&gt;
            &lt;li class="li-drop"&gt;
              &lt;a href="url" onclick="return go(this);"&gt;
                &lt;div class="div-drop"&gt;Choice 1&lt;/div&gt;
              &lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="li-drop"&gt;
              &lt;a href="url" onclick="return go(this);"&gt;
                &lt;div class="div-drop"&gt;Choice 2&lt;/div&gt;
              &lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="li-drop"&gt;
              &lt;a href="url" onclick="return go(this);"&gt;
                &lt;div class="div-drop"&gt;Choice 3&lt;/div&gt;
              &lt;/a&gt;
            &lt;/li&gt;
          &lt;/div&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class="drpbtn"&gt;Menu 2
        &lt;ul id="menu2"&gt;
          &lt;div class="dropdown-content"&gt;
            &lt;li class="li-drop"&gt;
              &lt;a href="url" onclick="return go(this);"&gt;
                &lt;div class="div-drop"&gt;Choice 1&lt;/div&gt;
              &lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="li-drop"&gt;
              &lt;a href="url" onclick="return go(this);"&gt;
                &lt;div class="div-drop"&gt;Choice 2&lt;/div&gt;
              &lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="li-drop"&gt;
              &lt;a href="url" onclick="return go(this);"&gt;
                &lt;div class="div-drop"&gt;Choice 3&lt;/div&gt;
              &lt;/a&gt;
            &lt;/li&gt;
          &lt;/div&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class="drpbtn"&gt;Menu 3
        &lt;ul id="menu3"&gt;
          &lt;div class="dropdown-content"&gt;
            &lt;li class="li-drop"&gt;
              &lt;a href="url" onclick="return go(this);"&gt;
                &lt;div class="div-drop"&gt;Choice 1&lt;/div&gt;
              &lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="li-drop"&gt;
              &lt;a href="url" onclick="return go(this);"&gt;
                &lt;div class="div-drop"&gt;Choice 2&lt;/div&gt;
              &lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="li-drop"&gt;
              &lt;a href="url" onclick="return go(this);"&gt;
                &lt;div class="div-drop"&gt;Choice 3&lt;/div&gt;
              &lt;/a&gt;
            &lt;/li&gt;
          &lt;/div&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Can you help me fix this?</p>