Question

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

请参阅此处的示例：

.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/

你对我有什么建议吗？谢谢！

Answer 1

问题在于定位在你的CSS中。容器不应具有位置属性以保持其位置。

稍后你应该有绝对的位置来保持最重要的。

这是固定的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;
}

Answer 2

问题是.menu-container的位置设置为相对位置，因此ul相对于此位置（此处的2 relative字不相关！）。
从position: relative删除.menu-container将执行您想要的操作，但子菜单ul的大小将与父li项不同。

所以我使用calc作为ul的宽度（如果在其他地方尝试过，可能必须更改该值）

＆＃13;

.container {
  max-height: 70px;
  overflow-y: scroll;
}
table {
  width: 100%;
}
.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;
  width: calc((100% - 40px) / 5);
}
.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;
}

＆＃13;

<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>

＆＃13;

P.S。奇怪的故障。选择ul的文本会将表格滚动到该文本所在的位置

在表格前显示弹出菜单

2 个答案: