How can I traverse a mega menu using hover events in JavaScript?
<p>I am building a mega menu style navigation using HTML, CSS, and JavaScript.
See code pen here.
<a href="http://codepen.io/anon/pen/bZoBYz" rel="nofollow">http://codepen.io/anon/pen/bZoBYz</a></p>

<p>HTML:</p>

<pre><code>&lt;div id="menu"&gt;
      &lt;div id="menu-wrapper"&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a id="item-1-button" href="#"&gt;Item 1&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;Item 2&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;Item 3&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;

    &lt;div id="mega-menu"&gt;
      &lt;div id="mega-menu-wrapper"&gt;
        &lt;div id="item-1-menu"&gt;
          &lt;ul&gt;
            &lt;li&gt;Child list item 1&lt;/li&gt;
            &lt;li&gt;Child list item 2&lt;/li&gt;
            &lt;li&gt;Child list item 3&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>* {
  margin: 0px;
  padding: 0px;
  border: none;
  outline: none;
  font-family: sans-serif;
}

div#menu {
  position: relative;
  background: #DDD;
  overflow: hidden;
  height: 50px;
}

div#menu ul{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

div#menu ul li {
  display: inline-block;
}

div#menu ul li a {
  text-decoration: none;
  padding: 20px;
  background: #AAA;
}

div#menu-wrapper {
  width: 900px;
  margin: auto;
}

div#mega-menu {
  height: 200px;
  position: relative;
  background: #AAA;
  display: none;
}

div#mega-menu-wrapper {
  width: 900px;
  height: 100px;
  margin: auto;
}

div#item-1-menu {
  position: absolute;
  display: none;
  padding: 20px;
}

div#item-1-menu ul li {
  list-style: none;
}
</code></pre>

<p>JavaScript:</p>

<pre><code>var itemOneButton = document.getElementById("item-1-button");
var itemOneMenu = document.getElementById("item-1-menu");
var megaMenu = document.getElementById("mega-menu");

var hoveringItemOne = false;
var hoveringMegaMenu = false;

itemOneButton.addEventListener('mouseover', function() {
  hoveringItemOne = true;
  changeMenu("item1");
}, true);

itemOneButton.addEventListener('mouseout', function() {
  hoveringItemOne = false;
  changeMenu();
}, true);

megaMenu.addEventListener('mouseover', function() {
  hoveringMegaMenu = true;
  changeMenu();
}, true);

megaMenu.addEventListener('mouseout', function() {
  hoveringMegaMenu = false;
  changeMenu();
}, true);

function changeMenu(menuItem) {
  if(menuItem === "item1") {
    showItem1Menu()
  }

  if(hoveringItemOne == false &amp;&amp; hoveringMegaMenu == false) {
    hideItem1Menu();
  }
}

function showItem1Menu() {
  megaMenu.style.display = 'block';
  itemOneMenu.style.display = 'block';
}

function hideItem1Menu() {
  megaMenu.style.display = 'none';
  itemOneMenu.style.display = 'none';
}
</code></pre>

<p>If you hover Item 1 in the menu, the mega menu for that menu item will appear. The problem is that when I try to hover from the menu item down to the mega menu, it will disappear even though the two are right beside each other.</p>

<p>Im using boolean variables to control the visibility of the mega menu because I eventually want to have the menu work from item 1, 2, 3, or more menu items.</p>

<p>I have also tried this variation where I set both of the following variables to true when hovering the first menu item.
- hoveringItemOne
- hoveringMegaMenu
<a href="http://codepen.io/anon/pen/oLGYOE" rel="nofollow">http://codepen.io/anon/pen/oLGYOE</a></p>

<pre><code>itemOneButton.addEventListener('mouseover', function() {
  hoveringItemOne = true;
  hoveringMegaMenu = true;
  changeMenu("item1");
}, true);
</code></pre>

<p>A problem with this variation is that the hover value of the variable hoveringMegaMenu variable is disturbed by its child elements. It also stays true forever if the mega menu that appears is never touched.</p>

<p>Is there a better way of developing a mega menu like this? The point is to be able to interact with anything inside the mega menu continaer until the cursor leaves either the mega menu spanning the entire width of the page, or until another menu item is hovered, which would reveal a new set of content.</p>