I have implemented a popup window which displays a list on hover. It works perfectly on the default page, but when I scroll down, the popup also moves with the scrollbar.
Below is the HTML code that creates the hidden popup list initially and shows it on hover using the following CSS.
Apologies for including everything, but I have tried adjusting the popup position by changing the position, top, left, right values as suggested in various similar questions, but with no success.
.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("' + request + '","' + preframerow + '");">Request</a>
<li><a href="javascript:OpenFileInPopup("' + response + '","' + preframerow + '");">Response</a>
<li><a href="javascript:OpenFileInPopup("' + callStack + '","' + preframerow + '");">CallStack</a>
</li></ul></li>
</ul>
</div>
</td>