Drop Down Menu Hidden by div with overflow auto

Question

I have this Drop Down Menu that is placed in a table row, that has some hidden content.

I can't touch ancestror html, because I dont control it. I have found this example https://css-tricks.com/popping-hidden-overflow/ but the div still stays within the overflowing div.

There is any solution, without needing to place this drop down content in the end of the HTML with fixed position?

I'm refearing to the dropdown menu with id 'thedropdownmenu' and the div with overflow with class name 'dataTables_scrollBody'. Please check on the jsfiddle.

Code Sample

<div class="dataTables_scroll">
        <div class="dataTables_scrollBody" style="position: relative; overflow: auto; width: 100%;">
           <table id="myDataTable" class="display no-footer DTTT_selectable dataTable" aria-describedby="myDataTable_info" role="grid" style="width: 1960px;">
              <thead>
              </thead>
              <tbody>
                 <tr role="row" class="odd">
                    <td>
                       <div id="756d44c4-21f8-4cb7-bfb2-f3e8803630c1_Ajuntar" data-requiredfields="12" class="tableAction tableActionDropdown tableActionActive" onclick="checkIfChangeWithReasonActionIsActive(this, event)">
                          <div id="thedropdownmenu" class="dropdown open">
                             <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"><span id="" class="tableActionOption icon-reject" title="Ajuntar"></span></a>
                             <ul class="dropdown-menu" role="menu">
                                <li class="dropdown-item"><a class="tableAction" tabindex="-1" href="#" value="5a3a930462168e45246c9da7" data-option="687a2389-abfa-4915-8eec-86ea3b7f0509">Falta DNI</a></li>
                                <li class="dropdown-item"><a class="tableAction" tabindex="-1" href="#" value="5a3a930462168e45246c9da7" data-option="a5d7cd22-34bd-4cc3-9534-d19d5c31f6f0">Faltan Escrituras</a></li>
                                <li class="dropdown-item"><a class="tableAction" tabindex="-1" href="#" value="5a3a930462168e45246c9da7" data-option="23065843-eac4-4a56-964e-c22dc9755fc7">Falta SEPA</a></li>
                             </ul>
                          </div>
                       </div>
                    </td>
                 </tr>
              </tbody>
           </table>
        </div>
     </div>

Answer 1

I only see a way, using fixed positioning. It will not have the same efect, but see no other way if you don't want to change the html to other place. Example:

.dropdown-menu{
    position: fixed;
    left: 0;
    top: 0;
    right: auto;
}

Hope it helps.