title: Javascript mouseover mouseout menu
body: <p>I'm trying to make this javascript menu work where, when I hover over AAA its submenu shows and on BBB its submenu shows.</p>
  
  <p>It is implemented as a javascript which toggles the #subnav1 and #subnav2 css visibility where the two overlap one another.</p>
  
  <p>However it seems only BBB mouseover works correctly, I suspect because the subnav2 is on top of the subnav1 however even messing with z-index doesn't solve the quirk..
  Any idea?</p>
  
  <p><img src="https://i.stack.imgur.com/Zi0Hv.png" alt="enter image description here"></p>
  
  <p>Below is the code.. I left the css style so to make it look like a menu, hope it's not too long for an sscce</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
      &lt;style&gt;
      #nav {
      float:left;
      height:20px;
      width:50%;
      font-size:.8em;
      margin:10px 0 0 20%;
      }
  
      #nav li,#subnav1 li,#subnav2 li {
      display:inline;
      }
  
      #nav ul li a,#subnav1 ul li a,#subnav2 ul li a {
      color:#000;
      text-decoration:none;
      margin:0 10px 0 0;
      }
  
      #nav ul,#subnav1 ul,#subnav2 ul {
      list-style-type:none;
      margin:0;
      padding:0;
      }
  
      #subnav1,#subnav2 {
      width:100%;
      height:100%;
      position:absolute;
      top:0;
      left:0;
      }
  
      #subnavs {
      background:none repeat scroll 0 0 #ccc;
      position:relative;
      float:left;
      height:20px;
      width:60%;
      font-size:.8em;
      margin:0 0 0 20%;
      padding:3px 0 0 10px;
      }
      &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
       &lt;div id="nav"&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="index.php"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li onmouseover="showAAA(true, 'subnav1')" onmouseout="showAAA(false, 'subnav1')"&gt;&lt;a&gt;AAA&lt;/a&gt;&lt;/li&gt;
  &lt;li onmouseover="showAAA(true, 'subnav2')" onmouseout="showAAA(false, 'subnav2')"&gt;&lt;a&gt;BBBB&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div id="subnavs"&gt;
  &lt;div id="subnav1" onmouseover="showAAA(true, 'subnav1')" onmouseout="showAAA(false, 'subnav1')"&gt;
  &lt;ul style="display: none; z-index: 10;"&gt;
  &lt;li&gt;&lt;a&gt;AAAAAAAA1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a&gt;AAAAAAAA2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a&gt;AAAAAAAA3&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a&gt;AAAAAAAA4&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div id="subnav2" onmouseover="showAAA(true, 'subnav2')" onmouseout="showAAA(false, 'subnav2')"&gt;
  &lt;ul style="display: none; z-index: -10;"&gt;
  &lt;li&gt;&lt;a&gt;BBBBBBBB1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a&gt;BBBBBBBB2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a&gt;BBBBBBBB3&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a&gt;BBBBBBBB4&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/div&gt;
      &lt;/body&gt;
      &lt;script type="text/javascript"&gt;
              function showAAA(show, subnavid) 
              {
              var subNav1 = document.getElementById(subnavid);
              var ull = subNav1.getElementsByTagName("ul");
              for (var i = 0, ii = ull.length; i &lt; ii; i++) 
              {
                  if(show) 
                  {
                    ull[i].style.display = "block";
                    ull[i].style.zIndex = 10;
                  }
                  else 
                  {
                    ull[i].style.display = "none";
                    ull[i].style.zIndex = -10;
                  }
              }
              };
  &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>