我为悬停时显示的每个表格行创建了一个菜单。除了一件事,一切都运行良好:
如果将鼠标悬停在最后一行菜单上,则该菜单应在表容器的前面弹出,而不是在容器内创建滚动条。
Screenshot of real application example
请参阅此处的示例:
.container {
max-height: 70px;
overflow-y: scroll;
}
table {
width: 100%;
}
.menu-container {
position: relative;
}
.menu-container ul {
padding: 0px;
margin: 0px;
border: 1px solid black;
background-color: gray;
}
.menu-container ul:hover {
position: absolute;
margin-top: -10px;
width: 100%;
}
.menu-container ul li {
display: none;
list-style-image: none;
margin: 0px;
padding: 0px;
width: 100%;
}
.menu-container ul:hover li {
color: red;
display: block;
margin-bottom: 0px;
}
<div class="container">
<table border="1">
<tbody>
<tr>
<td>
<div class="menu-container">
<ul> col1
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
<li>menu 4</li>
<li>menu 5</li>
<li>menu 6</li>
<li>menu 7</li>
<li>menu 8</li>
</ul>
</div>
</td>
<td>
col 1
</td>
<td>
col 2
</td>
<td>
col 3
</td>
<td>
col 4
</td>
</tr>
<tr>
<td>
col 1
</td>
<td>
col 1
</td>
<td>
col 2
</td>
<td>
col 3
</td>
<td>
col 4
</td>
</tr>
<tr>
<td>
col 1
</td>
<td>
col 1
</td>
<td>
col 2
</td>
<td>
col 3
</td>
<td>
col 4
</td>
</tr>
<tr>
<td>
col 1
</td>
<td>
col 1
</td>
<td>
col 2
</td>
<td>
col 3
</td>
<td>
col 4
</td>
</tr>
</tbody>
</table>
</div>
https://jsfiddle.net/6ty7uwup/1/
你对我有什么建议吗?
谢谢!
最佳答案
问题在于您的CSS中。
容器不应具有position属性来保持其位置。
以后,您应该具有绝对的位置,以使li高于一切。
这是固定的CSS:
.menu-container {
}
.menu-container ul {
padding: 0px;
margin: 0px;
border: 1px solid black;
background-color: gray;
}
.menu-container ul:hover {
position: absolute;
margin-top: -10px;
}
关于css - 在表格前显示弹出菜单,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/38825549/