问题描述:

With the following markup, I want to be able to have the dropdown menu not be clipped by the scrollable div container when the menu is shown for a table row item near the bottom of the container.

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

Is there anyway to prevent the dropdown menu from being clipped by the scrollable div container?

jFiddle Example: http://jsfiddle.net/hextL6zx/1/

网友答案:

As someone mentioned in the comments, z-index will help accomplish what you're looking for. Perhaps this fiddle will help:

 .dropdown {
    z-index: 100;
 }
相关阅读:
Top