title: Navigation on hover
body: <p>I want to remove class "open" when it's hovered over the area outside of "parent". How to do so?
  Here is my pen:
  <a href="https://codepen.io/anon/pen/aVJapG" rel="nofollow noreferrer">https://codepen.io/anon/pen/aVJapG</a></p>
  
  <p>I'm trying to make a navigation that drops on hover.</p>
  
  <p>Here is my js:</p>
  
  <pre><code>    function hover(tab) {
    showAndHiddenOthers(tab.id);
  }
  
  function showAndHiddenOthers(id) {
    for (var i = 0, len = document.getElementsByTagName('li').length; i &lt; len; i++) {
      if (id[id.length - 1] == i + 1) {
  
        document.getElementById('p' + (i + 1)).style.display = 'block';
        document.getElementById('tab' + (i + 1)).style.backgroundColor = '#3cf';
      } else {
  
        document.getElementById('p' + (i + 1)).style.display = 'none';
        document.getElementById('tab' + (i + 1)).style.backgroundColor = '#3c9';
      }
    }
  }
  </code></pre>