Html 在列表项中覆盖一个div

我试图在表单项中实现自动完成，当用户键入时，它会创建一个下拉菜单，其中包含建议列表，可以单击。这是在内部完成的

我做了一个密码笔来证明我想要什么。（查看自动完成字段及其下方的灰色隐藏框）

我的下拉列表：

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

这个问题是

position:absolute

不允许我覆盖自动完成字段下面的列表项，正如您在代码笔中看到的那样

因为某种原因，这对我不起作用

---

有人知道如何实现此下拉列表以覆盖其父项吗？

标签项溢出是隐藏的，下拉列表在其中，因此您无法看到它。

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

$（文档）.ready（函数（）{
$（“#测试”）.focus（函数（）{
$（“.input下拉菜单”）.show（）；
});
$（“#测试”）.mouseleave（函数（）{
$（“.input下拉菜单”）.hide（）；
});
});
//使用css
输入下拉列表{
位置：绝对位置；
背景：灰色；
边框：实心1px#000；
z指数：1001；
溢出：可见；
左边距：65px；
}
.输入下拉菜单{
显示：无；
}
//使用html
许可证#

111
111
111

---

谢谢你，我不认为事情那么简单。我添加了

.item autocomplete{position:static；overflow:visible；}

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