元素丟失懸停時，它是它的絕對元素

Question

我有元素，當我把鼠標懸停在鏈接（如下拉菜單）時，推出一個列表。它可以正常工作，但是當它位於div上時，它具有position：absolute屬性，並且我將鼠標移動到位置，當啓動後的元素時，懸停會丟失，列表消失。

你有什麼解決方案嗎？

編輯：

HTML

<table class="dp-table"> 
    <tbody><tr> 
     <td></td> 
     <td> 
      <ul class="dropv"> 
       <li><a href="#">Exports</a> 
        <table class="js-items innerTable"> 
         <tbody> 
        <tr><td>2014-05-19 11:31</td> 
<td class="right"><a>Download</a></td> 
</tr><tr><td>2014-05-19 12:20</td> 
<td class="right"><a>Download</a></td> 
</tr></tbody></table> 
       </li> 
      </ul> 
     </td> 
    </tr> 
</tbody></table> 

CSS

.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%; 
     } 

    } 
} 

和絕對定位的元素

<div class="tips-container"></div> 

和CSS

.tips-container { 
    height: 30px; 
    position: absolute; 
    width: 100%; 
    z-index: 3; 
} 

Answer 1

試試這個

FIDDLE

<table class="dp-table"> 
<tbody><tr> 
    <td></td> 
    <td> 
     <ul class="dropv"> 
      <li><a href="#">Exports 
       <table class="js-items innerTable"> 
        <tbody> 
       <tr><td>2014-05-19 11:31</td> 
<td class="right"><a>Download</a></td> 
</tr><tr><td>2014-05-19 12:20</td> 
<td class="right"><a>Download</a></td> 
</tr></tbody></table> 
      </a></li> 
     </ul> 
    </td> 
</tr> 
</tbody></table> 




.dropv, .dropv ul {padding: 0; margin: 0; list-style: none;} 
.dropv a {display: inline; width: 200px;} 
.ddp-table { float: left; } 
.ropv 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;} 
.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; 
    border-radius: 10px; 
opacity: 0.9; 


} 

td.right { 
text-align: right; 
width: 50%; 
}