title: Drop Down Menu Hidden by div with overflow auto
body: <p>I have this Drop Down Menu that is placed in a table row, that has some hidden content.
  <a href="https://i.stack.imgur.com/TQE6y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TQE6y.png" alt="Sample image"></a> </p>
  
  <p>I can't touch ancestror html, because I dont control it.
  I have found this example <a href="https://css-tricks.com/popping-hidden-overflow/" rel="nofollow noreferrer">https://css-tricks.com/popping-hidden-overflow/</a> but  the div still stays within the overflowing div.</p>
  
  <p>There is any solution, without needing to place this drop down content in the end of the HTML with fixed position?</p>
  
  <p>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.</p>
  
  <p><a href="https://jsfiddle.net/2L8du7w6/" rel="nofollow noreferrer">Code Sample</a></p>
  
  <pre><code>&lt;div class="dataTables_scroll"&gt;
          &lt;div class="dataTables_scrollBody" style="position: relative; overflow: auto; width: 100%;"&gt;
             &lt;table id="myDataTable" class="display no-footer DTTT_selectable dataTable" aria-describedby="myDataTable_info" role="grid" style="width: 1960px;"&gt;
                &lt;thead&gt;
                &lt;/thead&gt;
                &lt;tbody&gt;
                   &lt;tr role="row" class="odd"&gt;
                      &lt;td&gt;
                         &lt;div id="756d44c4-21f8-4cb7-bfb2-f3e8803630c1_Ajuntar" data-requiredfields="12" class="tableAction tableActionDropdown tableActionActive" onclick="checkIfChangeWithReasonActionIsActive(this, event)"&gt;
                            &lt;div id="thedropdownmenu" class="dropdown open"&gt;
                               &lt;a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"&gt;&lt;span id="" class="tableActionOption icon-reject" title="Ajuntar"&gt;&lt;/span&gt;&lt;/a&gt;
                               &lt;ul class="dropdown-menu" role="menu"&gt;
                                  &lt;li class="dropdown-item"&gt;&lt;a class="tableAction" tabindex="-1" href="#" value="5a3a930462168e45246c9da7" data-option="687a2389-abfa-4915-8eec-86ea3b7f0509"&gt;Falta DNI&lt;/a&gt;&lt;/li&gt;
                                  &lt;li class="dropdown-item"&gt;&lt;a class="tableAction" tabindex="-1" href="#" value="5a3a930462168e45246c9da7" data-option="a5d7cd22-34bd-4cc3-9534-d19d5c31f6f0"&gt;Faltan Escrituras&lt;/a&gt;&lt;/li&gt;
                                  &lt;li class="dropdown-item"&gt;&lt;a class="tableAction" tabindex="-1" href="#" value="5a3a930462168e45246c9da7" data-option="23065843-eac4-4a56-964e-c22dc9755fc7"&gt;Falta SEPA&lt;/a&gt;&lt;/li&gt;
                               &lt;/ul&gt;
                            &lt;/div&gt;
                         &lt;/div&gt;
                      &lt;/td&gt;
                   &lt;/tr&gt;
                &lt;/tbody&gt;
             &lt;/table&gt;
          &lt;/div&gt;
       &lt;/div&gt;
  </code></pre>