Overlay a div inside a list item - html

Question

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?

Answer 1

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

Answer 2

// 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>