css - 下拉菜单不显示正确(父 div 有溢出自动)

Question

我正在做一个元素，这个网站有灵活的值来适应任何分辨率。问题是在我的一个 div 中有一个下拉菜单，但它没有显示正确(被截断)，因为父 div 有一个溢出自动它截断了 div 之外的部分。

div 需要自动溢出，因为它有边框和填充

基本代码

div.box{
    border:1px solid #ccc;
    overflow:auto;
    padding:10px;
}
.dd-btn{
    width:22px;
    height:22px;
    float:left;
    position:relative;
}
.dd-btn ul{
    list-style:none;
    width:100px;
    height:200px;
    position:absolute;
    top:22px;
    right:0;
    z-index:100;
    background:#000 
}
.dd-btn ul li{
    width:100px;
    float:left; 
}


<div class="box">
   <ul>
       <li>link</li>
       <li>link</li>
       <li>link</li>
   </ul>
</div>

由于整个站点的结构，此 div 不能有 float 或宽度:100% 或高度。内容和分辨率将会改变。

这个问题有什么简单的技巧吗？

找到解决方案:

.box:after{
    clear:both;
    content:" ";
    display:block;
    font-size:0;
    height:0;
    line-height:0;
    visibility:hidden;
    width:0;
}

使用这个我可以摆脱溢出自动并且盒子将正确显示

Answer 1

.menu_list {
  ...
  overflow: visible;
}

参见 http://www.w3schools.com/cssref/pr_pos_overflow.asp