всплывающее окно меняет место на прокрутке вниз

Question

Я создал всплывающее окно i.e., чтобы показывать на hover, он отлично работает для страницы по умолчанию, но если я прокручу вниз, всплывающее окно также будет сдвинуто с помощью полосы прокрутки.

Ниже HTML кода создает выпадающий список, который первоначально hidden и показанный на hover со следующими 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>