As part of a project, I am required to design a view where a drop-down menu is positioned at the bottom of a parent div. You can see an example here: http://jsfiddle.net/Gruck/6owhaa63/. The "move to" item expands to show more options, similar to the mockup displayed in this image https://i.sstatic.net/HFGvm.png
<div class="job">
<div class="job-main">
<div class="title">
some content
</div>
<div class="counters">
some other content
</div>
</div>
<div class="ops">
<ul>
<li><a href="#">edit</a></li>
<li><a href="#">visualize</a></li>
<li><a href="#">move to</a>
<ul class="move-to">
<li>folder a</li>
<li>folder b</li>
</ul>
</li>
</ul>
</div>
</div>
Also, here's the CSS 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;
}
I'm looking for suggestions on how to display these options on top of the parent div while still keeping them inside the div. Is there a way to achieve this without moving the options outside and manually positioning them? Any ideas are welcome!
Thank you in advance for any insights or solutions you may have :) Cheers