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

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

正如评论中提到的那样，z-index将有助于实现您的目标。也许这个小提琴会有所帮助：

 .dropdown {
    z-index: 100;
 }