我为悬停时显示的每个表格行创建了一个菜单。除了一件事,一切都运行良好:
如果将鼠标悬停在最后一行菜单上,则该菜单应在表容器的前面弹出,而不是在容器内创建滚动条。

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 - 在表格前显示弹出菜单-LMLPHP

你对我有什么建议吗?
谢谢!

最佳答案

问题在于您的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/

10-14 16:16
查看更多