Почему раскрывающийся список отталкивает нижний элемент

Question

У меня есть эта страница , и если вы прокрутите ее до середины, вы увидите выпадающий список Select Shipping Method и, если вы щелкните по нему. Это нажмет на ссылку Review Terms & Conditions вниз ... вот мой код

HTML

<div class="shipping-box lf">
<div class="ship-box1 lf">
    <div class="sel-ship lf">
        <div class="ss lf">
            <span class="lf">Select Shipping Method</span>
            <a class="ship-btn" href="#"></a>
        </div>
        <div class="dropdown lf" style="display:none;">
            <ul>
                <li class="ss-1 lf">1 Location</li>
                <li class="ss-2 lf">2 Location</li>
            </ul>       
        </div>  
    </div>
    <div class="terms lf">Review Terms & Conditions</div>
</div>

CSS

.shipping-box {
    height: 65px;
    padding-top: 0;
    position: relative;
    width: 700px;
}

.lf {
    float: left;
}

.ship-box1 {
    width: 220px;
}

.sel-ship {
    width: 220px;
}

.terms {
    color: #009900;
    font-family: "helvetica neue";
    font-size: 12px;
    padding-left: 20px;
    text-decoration: underline;
    text-transform: uppercase;
    width: 200px;
}

Jquery

$('.ship-box1, .ship-btn').click(function () {
    $(this).parents('.sel-ship').find('.dropdown').slideToggle();
    $(this).parents('.ss').toggleClass('ship-btn:hover');
    return false;
});

Любые идеи о том, как убедиться, что ссылка на термины остается на месте

Answer 1

Это исправит для вас:

.sel-ship { position: relative; }
.dropdown { position: absolute; top: 25px; }

Answer 2

Набор для .sel-ship класса position:absolute;, для .terms класса набора margin-top:35px;

Answer 3

Попробуйте добавить это:

.sel-ship{
    position:absolute;
}
.terms{
    margin-top:30px;
}