Stacking issue with bootstrap dropdown - css

Question

When adding a dropdown to a table row, it is getting cut off as so:
Other questions have pointed me in the direction of a stacking problem, but I just can't work out how to fix it. I have tried adding z-index:1000 and position:relative style attributes to each of the parent DIV's but that hasn't fixed the issue. Not sure what to try next...
<div class="row-fluid">
<div class="span12">
<div class="grid simple ">
<div class="grid-body table_highlight>
<table class="table table-striped" id="example2">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="btn-group">
<a class="btn btn-info dropdown-toggle btn-demo-space" data-toggle="dropdown" href="#"> Info <span class="caret"></span> </a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Edit
I have changed the code to the following to make it clearer how it all fits together:
<div class="row-fluid" style=" border: 5px red solid;">
<div class="span12" style=" border: 5px green solid;">
<div class="grid simple " style=" border: 5px blue solid;">
<div class="grid-title">
...
</div>
<div class="grid-body table_highlight" style=" border: 5px yellow solid;">
This is how it now appears:

Answer 1

It looks like the problem is that the grid-body class has an overflow style set to hidden. When the dropdown is activated, its size is larger than the grid-body's size, so the dropdown gets clipped. You can see it fixed if you add overflow: visible to the style attribute on your div with the grid-body class: fiddle
As a permanent fix, you might want to explore modifying the HTML and/or CSS instead of just adding the style directly to the element, though.