title: Element lost hover when it's absolute element behind it
body: <p>I have element, which shoving a list when I hover over link(like drop down menu). It's work fine at all, but when it's over div, which have position: absolute attribute, and I move mouse to position, when the element behind start, the hover is lost and the list disappear. </p>
  
  <p>Can you have any solutions for this?</p>
  
  <p>EDIT:</p>
  
  <p>HTML </p>
  
  <pre><code>&lt;table class="dp-table"&gt;
      &lt;tbody&gt;&lt;tr&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;ul class="dropv"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Exports&lt;/a&gt;
                      &lt;table class="js-items innerTable"&gt;
                          &lt;tbody&gt;
                      &lt;tr&gt;&lt;td&gt;2014-05-19 11:31&lt;/td&gt;
  &lt;td class="right"&gt;&lt;a&gt;Download&lt;/a&gt;&lt;/td&gt;
  &lt;/tr&gt;&lt;tr&gt;&lt;td&gt;2014-05-19 12:20&lt;/td&gt;
  &lt;td class="right"&gt;&lt;a&gt;Download&lt;/a&gt;&lt;/td&gt;
  &lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;&lt;/table&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.dp-table { float: left; }
  .dropv, .dropv ul {padding: 0; margin: 0; list-style: none;}
  .dropv a {display: inline; width: 200px;}
  .dropv li {float: left; padding: 0px 8px 2px 0px;}  /* all list items */
  .dropv li table {position: absolute; background: #241F1B; z-index: 1000;
    padding: 0px 0px 0px 4px; width: 370px; left: -9999px;padding-top: 0.4375rem;} /* second-level lists */
    .dropv li:hover table {left: auto; } /* nest list under hovered list items */
    .dropv li table a {color: $activeColor; cursor: pointer; transition: color 0.5s ease; text-decoration: none;}
  .dropv li table a:hover {color: #FFFFFF;}
  .dropv li table {
      display: inline-block;
      max-width: 235px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #90887A;
      font-size: 0.8125rem;
      line-height: 2.2;
      margin-left: -130px;
      margin-top:20px;
      border-radius: 10px;
      opacity: 0.9;
  
      tr {
  
          td.right {
              text-align: right;
              width: 50%;
          }
  
      }
  }
  </code></pre>
  
  <p>And the absolute positioned element</p>
  
  <pre><code>&lt;div class="tips-container"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>and CSS</p>
  
  <pre><code>.tips-container {
      height: 30px;
      position: absolute;
      width: 100%;
      z-index: 3;
  }
  </code></pre>