title: Hover not working with Internet Explorer/Edge
body: <p>I have a menu that is displayed on the location where the user clicks on the web page. This is how it works:</p>
  
  <ul>
  <li>a hidden DIV with menu content is present on the bottom of the page</li>
  <li>click event triggers a function</li>
  <li>DIV is displayed by altering it's style (to trigger the hover CSS)</li>
  <li>DIV is positioned on the mouse click location</li>
  <li>DIV's display style is unset after a small fraction of time (0,5 seconds)</li>
  <li>the user has the option to use the menu as long as he hovers over it</li>
  </ul>
  
  <p>This works in Chrome/Opera, but not in Internet Explorer/Edge. There's a 1px (my guess, since I can't measure it) distance the user has to move the mouse to trigger the hover on Internet Explorer/Edge (within the 0,5 seconds time frame).</p>
  
  <p>Of course, I can fix this problem by repositioning the menu 1px left/up, but the point of this question is to try to understand why is this happening.</p>
  
  <p>This is the HTML stripped of unnecessary code:</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-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  
  &lt;script src="https://code.jquery.com/jquery-3.1.1.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(document).click(function(e) {
      menu = document.getElementById("m");
      menu.style.display = 'block';
      menu.style.left = e.pageX + "px";
      menu.style.top = e.pageY + "px";
      setTimeout(function(){ menu.style.display = ''; }, 500);
  });
  &lt;/script&gt;
  
  &lt;style&gt;
  html, body
  {
      height: 100%;
      margin: 0;
      padding: 0;
  }
  #m
  {
      display: none;
      position: absolute;
      z-index: 100;
      background-color: white;
  }
  #m:hover
  {
      display: block;
  }
  #m ul
  {
      color: #1E90FF;
      list-style-type: none;
      margin: 0;
      padding: 0;
      border: 1px solid gray;
  }
  #m li
  {
      margin: 0;
      padding: 5px 10px;
  }
  #m li:hover
  {
      color: white;
      background-color: #1E90FF;
  }
  &lt;/style&gt;
  
  &lt;body&gt;
  &lt;div id="m"&gt;
  &lt;ul&gt;
      &lt;li&gt;One&lt;/li&gt;
      &lt;li&gt;Two&lt;/li&gt;
      &lt;li&gt;Three&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>