0

请看下面的小提琴： http: //jsfiddle.net/4LZnC/ 我需要这样做，所以当您将鼠标悬停在.dropdown元素上时，.expandable要显示但使用父级的背景和边框。换句话说，尝试position:absolute从.expandable. 我需要相同的效果，但不.expandable压低其他内容。我该如何做到这一点？我真的一点头绪都没有。

4

1 回答 1

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/

于 2013-04-24T09:34:22.543 回答