Javascript 溢出正在父div后面发送下拉列表，z索引不工作

各位， 我似乎不明白为什么溢出会破坏代码

所以下面的代码在两种情况下都可以正常工作。 a） 如果我从.bs example中删除overflow-x和overflow-y 或 b） 如果我删除ul和li

但是我需要在我的代码中同时使用这两个元素，但是由于这些css和ul以及li都在代码中，下拉列表在div后面崩溃了。我缺少了什么

.bs示例{
边框：1px纯黑；
溢出y：滚动；
溢出x：隐藏；
最小高度：100px；
最大高度：250px；
}
.bs示例.下拉列表{
位置：绝对位置；
z指数：999；
}

菜单

试试这个：

$（文档）.ready（函数（）{
$（“#下拉菜单按钮”）。单击（函数（）{
$（'.dropdown menu'）.toggle（）；
})
})

.helper{
最小高度：100px；
最大高度：250px；
位置：相对位置；
}
.bs示例{
边框：1px纯黑；
溢出y：滚动；
溢出x：隐藏；
最小高度：100px；
最大高度：250px；
左：0px；
右：0px；
位置：绝对位置；
}
.下拉列表{
位置：绝对位置；
z指数：999；
左：20px；
顶部：40px；
}

菜单

如果可能，请提供codepen或JSFIDLE。@SagarKharche不，内置堆栈片段是首选方式。嗨，Ehsan，谢谢你的回答，但是你的代码基本上是从li元素中删除的，在我的代码中，虽然只有一个li列表项，但是列表组中有多个li项，每个li都有自己的下拉列表，因此将下拉列表保存在li中很重要。这正是我要做的。如果我将下拉列表移到li之外，或者如果我移除ul li，一切都正常。