jQuery Slide Down定位

我在使用JQuery下拉功能时遇到问题。我可以使其正常工作，但是要滑动的元素的位置根据视口的大小而变化。我想做的是将它与要滑动的元素绑定在一起。

这种JSfiddle的例子说明了我遇到的问题。我希望.drop元素与元素的右边缘.opener对齐。

的CSS

.box {
    position: relative;
}
.box .opener {
    display: block;
    background: #faa;
    line-height: 40px;
}
.box .drop {
    width: 400px;
    position: absolute;
    display: none;
    background: #afa;
    bottom: 40px;
    float: left;
    margin-left: 500px;
} 

jQuery的

$('.opener').click(function(e){
    $('.drop').slideDown();
});

干杯!