Drop down menu 内联下拉定位问题

请看下面的小提琴： 当您将鼠标悬停在

.dropdown

元素上时，我需要这样做，

.expandable

以显示，但使用父对象的背景和边框。

---

换句话说，尝试从

.expandable

中删除

位置：绝对。我需要相同的效果，但不需要
.expandable
向下推其他内容。我如何做到这一点？我真的没有任何线索。
您需要为父元素指定绝对位置，并用固定高度的容器将其包装起来

HTML

<div id="wrap">
    <div class="dropdown">
        Flow content
        <div class="expandable">
        my expandable content here my expandable content here my expandable content   here my expandable content here my expandable content here 
        </div>
    </div>
</div>

工作示例
要么我没有正确解释，要么你没有理解。我需要它适合家长的背景和边框，而不是创建自己的<代码>换句话说，请尝试从.expandable中删除位置：绝对。我需要相同的效果，但不需要。可扩展，将其他内容向下推。

div.dropdown {background:red; border:3px solid blue; position:absolute; width: 100%;}
div.dropdown .expandable { display:none; position: relative; top:100%; left:0; }
div.dropdown:hover .expandable { display:block; }
#wrap{ height:26px; }