Positioning div right under an a tag

I'm trying to make a drop down menu to appear right under the URL that opens it up. So far I've managed to make a menu appear, but I can't figure out how to position it properly. My HTML looks like this

<div id="container">
  Content here
  <div class="line-gray-footer"></div>
  <div class="footer">
    <a href="#">Link 1</a> | <a id="langSwitch">English ▼</a>
    <div id="dropdown" class="drop-choices">
      <a class="choice" href="/de">Deutsch</a>
      <a class="choice" href="/fr">Français</a>
      <a class="choice" href="/it">Italiano</a>
      <a class="choice" href="/es">Español</a>
    </div>  
  </div>
  <div class="morestuff">
  <table>
  <tr>
    <th>Test</th><th>Test</th>
  </tr>
  <tr>
    <td>A</td><td>b</td>
  </tr>
  </table>
  </div>
</div>

CSS

#container{
  width:70%;
  background: red;
  margin: 0 auto;
  height:800px;
}
.line-gray-footer {
    background: #ececec none repeat scroll 0 0;
    height: 3px;
    margin: 10px 10px;
}
.footer {
    text-align: center;
}

.drop-choices.inuse {
    opacity: 1;
    visibility: visible;
    display: block;
}

.drop-choices {
    background-color: white;
    border: 1px solid gray;    
    border: medium none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.24);
    display: none;
    line-height: normal;
    margin-top: 0;    
    opacity: 0;
    position: absolute;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s;
    visibility: hidden;
    white-space: nowrap;
    z-index: 100;    

}

.drop-choices a.choice {
    border-bottom: 1px solid #edf1f3;
    color: #777;
    padding: 3px 12px;
    transition: all 0.1s ease 0s;
    cursor: pointer;
    display: block;
    padding: 2px 3px 1px;
}
.morestuff table{
  width: 100%;
  border: 1px solid black;
}

Here is a jsFiddle URL of the whole thing https://jsfiddle.net/jaktav3t/