我创建了弹出窗口,即在悬停时显示的列表,它适用于默认页面,但如果我向下滚动弹出窗口也会按下滚动条。
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("' + 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>
&#13;
答案 0 :(得分:2)
这样的东西?
.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("' + 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>