展开下拉列表而不更改容器尺寸

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