title: Pure CSS & JS drop down menu - onmouseover issue
body: <p>I've written this code to create simple CSS and Javascript dropdown menu. </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;li&gt;&lt;a href="#" onmouseover="showRanksSubmenu()" onmouseout="hideRanksSubmenu()"&gt;XYZ&lt;/a&gt;
      &lt;ul id="rankSubMenu" onmouseover="showRanksSubmenu()" onmouseout="hideRanksSubmenu()"&gt;
          &lt;li&gt;&lt;a href="#" style="position: absolute; top: 12px;"&gt;AAA&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" style="position: absolute; top: 50px;"&gt;BBB&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" style="position: absolute; top: 88px;"&gt;CCC&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#rankSubMenu {
       display: none; 
       position: absolute; 
       bottom: 10px;
       left: 278px;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>function showRanksSubmenu() {
      document.getElementById('rankSubMenu').style.display = 'block';
  }
  
  function hideRanksSubmenu() {
      document.getElementById('rankSubMenu').style.display = 'none';
  }
  </code></pre>
  
  <p>Menu items have of course some height, background and other stuff to make them look like buttons. The problem is that, there is some empty space between this buttons (like a few pixels) and when user stops mouse cursor there, menu disappear (in fact menu always does that, unless you move your cursor real fast). I tried to define this whole area as div or try any other ideas that I thought about, but with no success. Any suggestions how can I solve this?</p>