防止子菜单被溢出可滚动容器剪切

Question

使用以下标记，我希望在容器底部附近的表格行项目显示菜单时，下拉菜单不会被可滚动的 div 容器剪切。

<div style="position: relative;">
  <div style="overflow-y: scroll; height: 100px; width: auto;">
    <table style="width: 100%; border-collapse: collapse;">
      <tr>
        <td>Row 1</td>
        <td>
          <ul class="dropdown">
            <li>                 
              <ul class="submenu"><li>option</li></ul>
            </li> 
          </ul>
        </td>
      </tr>
    </table>
  </div>
</div>

有没有办法防止下拉菜单被可滚动的 div 容器剪切？

jFiddle 示例：http://jsfiddle.net/hextL6zx/1/

Answer 1

正如 cmets 中提到的那样，z-index 将帮助完成您正在寻找的内容。也许这个小提琴会有所帮助：

 .dropdown {
    z-index: 100;
 }