Question

请看一下以下小提琴：http://jsfiddle.net/4LZnC/ 当你将鼠标悬停在.dropdown元素上时，我需要这样做，.expandable显示但使用父级的背景和边框。换句话说，请尝试从position:absolute中删除.expandable。我需要相同的效果，但没有.expandable推送其他内容。我如何实现这一目标？我真的不知道。

Answer 1

您需要为父元素指定绝对位置，并用固定高度的容器包装它。

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

<强> CSS

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

工作示例 http://jsfiddle.net/4LZnC/3/

内联下拉定位问题

1 个答案: