当内容很大时，下拉菜单与其容器重叠

Question

我正在使用Bootstrap 3来向上弹出菜单Dropdowns。下面是我目前所拥有的以及应该是什么的屏幕截图。

解释 因此，当用户点击集成传输解决方案时，下拉菜单会向上打开，如下图所示，此部分工作正常。但当他们的内容很大时，下拉列表会扩展并与其容器重叠。我认为我的CSS有问题。我还是想弄清楚。

HTML

<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
    <h3 class="heading">Over 100 years of commitment Over 100 years of commitment</h3>
    <div class="body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et risus ut risus porttitor.</div>
    <div class="readmore"><a href="#">READ MORE <span class="glyphicon glyphicon-chevron-right"></span></a></div>
</ul>
<a href="#" id="drop1" role="button" class="dropdown-toggle" data-toggle="dropdown">Integrated transport solutions</a>

CSS

#home-carousel .caption .row .col-xs-6 ul.dropdown-menu{
    width: 100%;
    margin: 0;
    margin-top: -313px;
    box-shadow: none;
    border-radius: 0;
    border: none;
    background: #FFF url(http://s30.postimg.org/jdtl0qyn1/caption_shadow.jpg) bottom center repeat-x;
    border-top: 5px solid #223c82;
    padding: 30px 15px 30px 15px;
    height: auto;
    position: absolute;
    bottom: 0;
    top: 0;
}

#home-carousel .caption .row .col-xs-6 a.dropdown-toggle{
    color: #FFF;
    font-weight: bold;
}

.caption .row .dropdown-menu h3{
    color: #223c82;
    font-weight: bold;
    text-align: center;
    margin: 0;
    border-bottom: 1px solid #c6c264;
    padding-bottom: 30px;
    font-size: 30px;
}

.caption .row .dropdown-menu .body{
    color: #223c82;
    text-align: left;
    margin: 0;
    font-size: 13px;
    padding-top: 21px;
}

.caption .row .dropdown-menu .readmore{
    padding-top: 23px;
    text-align: right;
}

.caption .row .dropdown-menu .readmore a{
    font-weight: bold;
    color: #223c82;
    font-size: 13px;
}

#home-carousel .caption .row .col-xs-6 {
    background: url(http://s24.postimg.org/e18dg0mbp/mediabox_cover.png) repeat top;
    height: 100%;
    border-top: 5px solid #c6c264;
    width: 208px;
    margin-right: 32px;
    text-align: center;
    padding: 15px 5px 5px 5px;
    word-wrap: break-word;
    margin-left:100px;
}

#home-carousel .caption .row .col-xs-6 a.dropdown-toggle {
    color: #FFF;
    font-weight: bold;
}

我还假设问题出现在 #home-carousel .caption .row .col-xs-6 ul.dropdown-menu CSS中。这是JSFIDDLE

目前我拥有的

它应该是什么