在不更改容器尺寸的情况下展开下拉菜单

Question

我在黄色背景的 div 中包含一个下拉框。检查 plunker code。

当我点击下拉按钮时，下拉菜单会展开并且背景容器的高度也会增加。它将下拉项目的背景绘制为黄色。

我为列表项添加了z-index，

<div class="drp-down-cnt" style="z-index:1000;">

看起来，

我希望它看起来像什么，

只有下拉按钮的背景必须是黄色，而下拉列表项的背景必须是白色/灰色。

Answer 1

限制背景容器的高度（plunk）：

.drp-down-bgnd {
   height: 48px;
 }

或者将位置更改为absolute，这样它就不会改变容器的高度（plunk）：

.drp-down-cnt{
   position: absolute;
   width: 158px !important;
 }