css overflow:hidden问题

Question

<div class="content">
   <div class="menu">//...下拉菜单</div>
</div>

现在content 有个overflow:hidden 导致menu 下拉菜单出不来 而其他页面的content需要overflow:hidden

所在不去除content 的 overflow:hidden情况下

怎样让菜单显示出来？

Answer 1

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。

Answer 2

css

.overflow-visible {
    overflow: visible !important;
}

html

<div class="content overflow-visible">
   <div class="menu">//...下拉菜单</div>
</div>

Answer 3

或者

content > menu {
   overflow: visible;
}

Answer 4

1. 增加一个class
2. 单独为其写行内样式
3. 看看结构，是不是不够合理。

Answer 5

<div class="content">
</div>
<div class="menu">//...下拉菜单</div>

.menu {pos:a定位}

把menu拿出来吧，这样虽然代码不太好看，但是兼容性最好。