dropdown dont show correct(parent div has overflow auto)

i am working on a project, this site has flexible values to fit any resolution. The issue is that in one of my divs there's an dropdown menu, but it doesn't shows correct(being cutoff) because the parent div has an overflow auto it cutoff the part thats outside the div.

The div needs the overflow auto because it has a border and a padding

basic code

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>

this div cant have a float or width:100% or a hei开发者_如何学JAVAght because of the structure of the whole site. Content and resolution will change.

Is there a simple trick for this issue?

Found a solution:

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

using this i can get rid of the overflow auto and the box will be display correct

.menu_list {
  ...
  overflow: visible;
}

see http://www.w3schools.com/cssref/pr_pos_overflow.asp