Dropdown in parent div with overflow:auto <p>For a project, i need to create a view where a drop down menu is at the bottom of a parent div. A short fiddle here : <a href="http://jsfiddle.net/Gruck/6owhaa63/" rel="nofollow noreferrer">http://jsfiddle.net/Gruck/6owhaa63/</a>, where "move to" item opens some more options, as shown on this mockup <a href="https://i.stack.imgur.com/HFGvm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HFGvm.png" alt="mock for that view"></a></p> <pre><code> &lt;div class="job"&gt; &lt;div class="job-main"&gt; &lt;div class="title"&gt; some content &lt;/div&gt; &lt;div class="counters"&gt; some other content &lt;/div&gt; &lt;/div&gt; &lt;div class="ops"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;edit&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;visualize&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;move to&lt;/a&gt; &lt;ul class="move-to"&gt; &lt;li&gt;folder a&lt;/li&gt; &lt;li&gt;folder b&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>And some css</p> <pre><code>.job { border-style: solid; border-color: #F2F2F2; border-width: 2px; background-color: #FFFFFF; overflow: auto; } .job-main { border-bottom: 1px solid #F2F2F2; overflow: hidden; } .title { width: calc(100% - 390px); height: 100px; float: left; min-width: 300px; padding:10px; background-color: #EE0000; } .counters { width: 362px; height: 80px; padding: 20px 0px 20px 0px; float: right; background-color: #00EE00; } </code></pre> <p>How to get the options to be displayed on top of the parent div ? is there anyway to do so yet keeping the options inside the div ? </p> <p>I guess i would have to move the options to outside the parent div and mannualy position them, but i would like to make sure i don't miss a nicer way to do so.</p> <p>Thanks for any idea you might offer :) Cheers</p>