Experiment with Tether

HTML

<script src="//rawgit.com/HubSpot/tether/master/dist/js/tether.min.js"></script>
<script src="//rawgit.com/HubSpot/drop/master/dist/js/drop.min.js"></script>
<div class="container">

  <div class="title-box">
    <p class="drop-target">
      1 - TITULO 1
    </p>   
    <hr/>
  </div>
  
  <div class="title-box">
    <p class="drop-target">
      2 - TITULO 2
    </p>
    <hr/>
  </div>
</div>

CSS

.drop-target{
  margin-top: 80px;
  margin-left: 200px;
  cursor: pointer;
}
.drop-element, .drop-element:after, .drop-element:before, .drop-element *, .drop-element *:after, .drop-element *:before {
  box-sizing: border-box; }

.drop-element {
  position: absolute;
  display: none; }
  .drop-element.drop-open {
    display: block; }

CoffeeScript

tether = new Tether({
  content: '<div>
              <ul>
                <li>ADD</li>
                <li>COPY</li>
                <li>TRASH</li>
              </ul>
            </div>'
  target: document.querySelector('.drop-target'),
  attachment: 'top right',
  targetAttachment: 'top left'
});