Overlay a div inside a list item

I'm trying to implement auto-complete inside a form item, where as the user types it creates a dropdown menu with a list of suggestions, which are clickable. This is done inside the Ionic Framework.

I've made a codepen to demonstrate what I want. (look at the auto-complete field, and the grey hidden box below it)

http://codepen.io/pbernasconi/pen/Cgobi

My dropdown:

<div class="list">
  <label class="item item-input item-stacked-label">
    <span class="input-label">License #</span>
    <input type="text" placeholder="AUTO COMPLETE FIELD">
    <div class="input-dropdown">
      <ul class="input-dropdown-menu">
        <li>...</li>
      </ul>
    </div>
  </label>
</div>

My CSS:

.input-dropdown {
    position: absolute;
    background: grey;
    border: solid 1px #000;
    z-index: 1001;
    overflow: visible;
}

.input-dropdown-menu {
}

This issue is that position: absolute doesn't allow me to overlay over the list item below the auto-complete field, as you can see in the codepen.

Here's an example of a solution, which for some reason doesn't work for me.

Does anyone know how to implement this dropdown to overlay over it's parent's?

The label item overflow is hidden and the dropdown list is inside it, so you can't see it.

// jquery code

$(document).ready(function() {
$("#test").focus(function(){
    $(".input-dropdown-menu").show();
});
$("#test").mouseleave(function(){
    $(".input-dropdown-menu").hide();
});
});


 //use css 

input-dropdown {
position: absolute;
background: grey;
border: solid 1px #000;
z-index: 1001;
overflow: visible;
margin-left:65px;
}

.input-dropdown-menu {
display:none;
}


 //use html


<div class="list">
<label class="item item-input item-stacked-label">
<span class="input-label">License #</span>
<input type="text" placeholder="AUTO COMPLETE FIELD" id ="test">
<div class="input-dropdown">
  <ul class="input-dropdown-menu">
    <li>111</li>
    <li>111</li>
    <li>111</li>
  </ul>
</div>