javascript - 弹出窗口在向下滚动时更改位置

Question

我已经创建了弹出窗口，即在悬停时显示的列表，它在默认页面上工作正常，但如果我向下滚动弹出窗口，也会用滚动条向下推。

在 HTML 代码下方创建了一个弹出列表，该列表最初是隐藏，并在 悬停 时显示，并带有以下 CSS。

抱歉发布了所有内容，但我尝试更改 position、top、left、right 来调整弹出位置正如几个类似问题中所建议的那样，但没有运气。

.dropv, .dropv ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.dropv a {
  display:inline;
  width: 185px;
}

.dropv li {
  float: left;
  padding: 0px 8px 2px 0px;
}

/* all list items */
.dropv li ul {
  position: fixed;
  background-color: lightyellow;
  padding: 0px 0px 0px 4px;
  width: 185px;
  left: -9999px;
}

/* second-level lists */
.dropv li:hover ul {
  left: auto;
}

/* nest list under hovered list items */
.dropv li ul li a {
  color: blue;
  text-decoration: none;
  display: block;
}

.dropv li ul li a:hover {
  position: relative;
  text-decoration: underline;
}

<td id="' + frameoperationtooltip.concat(framecol) + '" style="display:table-row;">
  <div class="dataheight">
    <ul class="dropv">
      <li>' + operation + '<ul><li>Message Recieved(Bytes):' + writtenBytes + '</li>
        <li>No. Of Streams:' + readBytes + '</li>
        <li>Message Sent(Bytes):' + nbStreams + '</li>
        <li>Size of Streams(Bytes):' + sizeOfStreams + '</li>
        <li>Elapsed Time(ms):' + elapsedTime + '</li>
        <li><a href="javascript:OpenFileInPopup(&quot;' + request + '&quot;,&quot;' + preframerow + '&quot;);">Request</a>
        <li><a href="javascript:OpenFileInPopup(&quot;' + response + '&quot;,&quot;' + preframerow + '&quot;);">Response</a>
        <li><a href="javascript:OpenFileInPopup(&quot;' + callStack + '&quot;,&quot;' + preframerow + '&quot;);">CallStack</a>
        </li></ul></li>
    </ul>
  </div>
</td>    

Answer 1

是这样的吗？

.dropv, .dropv ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.dropv a {
  display:inline;
  width: 185px;
}

.dropv li {
  float: left;
  padding: 0px 8px 2px 0px;
}

/* all list items */
.dropv li ul {
  background-color: lightyellow;
  padding: 0px 0px 0px 4px;
  width: 185px;
  left: -9999px;
}

/* second-level lists */
.dropv li:hover ul {
  left: auto;
}

/* nest list under hovered list items */
.dropv li ul li a {
  color: blue;
  text-decoration: none;
  display: block;
}

.dropv li ul li a:hover {
  position: relative;
  text-decoration: underline;
}

<td id="' + frameoperationtooltip.concat(framecol) + '" style="display:table-row;">
  <div class="dataheight">
    <ul class="dropv">
      <li>' + operation + '<ul><li>Message Recieved(Bytes):' + writtenBytes + '</li>
        <li>No. Of Streams:' + readBytes + '</li>
        <li>Message Sent(Bytes):' + nbStreams + '</li>
        <li>Size of Streams(Bytes):' + sizeOfStreams + '</li>
        <li>Elapsed Time(ms):' + elapsedTime + '</li>
        <li><a href="javascript:OpenFileInPopup(&quot;' + request + '&quot;,&quot;' + preframerow + '&quot;);">Request</a>
        <li><a href="javascript:OpenFileInPopup(&quot;' + response + '&quot;,&quot;' + preframerow + '&quot;);">Response</a>
        <li><a href="javascript:OpenFileInPopup(&quot;' + callStack + '&quot;,&quot;' + preframerow + '&quot;);">CallStack</a>
        </li></ul></li>
    </ul>
  </div>
</td>