<div class="content">
<div class="menu">//...下拉菜单</div>
</div>
现在content 有个overflow:hidden 导致menu 下拉菜单出不来 而其他页面的content需要overflow:hidden
所在不去除content 的 overflow:hidden情况下
怎样让菜单显示出来?
css
.overflow-visible {
overflow: visible !important;
}
html
<div class="content overflow-visible">
<div class="menu">//...下拉菜单</div>
</div>
- 增加一个class
- 单独为其写行内样式
- 看看结构,是不是不够合理。
HTML,注意.content外面那层
<div class="something">
<div class="content">
<div class="menu">
//you coding
</div>
</div>
</div>
CSS
.something{
position:relative;//创建.menu的包含块
}
.content{
position:static;//这句可以不要,只是确保这里不可以是relative或者absolute
overflow:hidden;
}
.menu{
position:absolute;
z-index:2
}
原理: overflow:hidden只可以挡住以该元素为包含块的内容。而这段代码中,.menu的包含块是.something而不是.content。
<div class="content">
</div>
<div class="menu">//...下拉菜单</div>
.menu {pos:a定位}
把menu拿出来吧,这样虽然代码不太好看,但是兼容性最好。
或者
content > menu {
overflow: visible;
}