проблема положения div в chrome

Question

У меня есть div, который выпадает с помощью jquery, когда пользователь наводит мышью на ссылку.CSS для div здесь:

.mask-layer {
    height: 0;
    overflow: visible;
    position: relative;
    top: 54px;
    float: right;
    z-index: 1000;
}
.slidedown {
    height: auto;
    width: 300px;
    background: url(../images/bg_shopping_bag_span.png); background-repeat:repeat-y;
    color: white;
}

Html - это просто слайд-слайд внутри div-слоя с маской.По какой-то причине я не могу опубликовать здесь угловые скобки, чтобы показать вам.

И, наконец, jquery:

jQuery(document).ready(function() {
    jQuery('.slidedown').hide(); 
    jQuery('a.top-link-cart').hover(function() {
        jQuery('.slidedown').stop(true, true).animate({
            height: ['toggle', 'swing'],
        }, 600, function() {});
    }, function() {
        jQuery('.slidedown').mouseout(function() {
            setTimeout(function() {
                jQuery('.slidedown').stop(true, true).animate({
                    height: '0px'
                }, 600, function() {});
            }, 200 );
        });
    });
});

Раскрывающийся список хорошо работает в Internet Explorer и Firefox.Однако в chrome скользящий элемент div отображается в неправильной позиции на странице.Он появляется за пределами всех других элементов на странице на краю экрана.Есть ли способ это исправить?Я должен упомянуть, когда я отключаю jquery, чтобы div не был скрыт и не анимирован, он находился в правильном положении даже в Chrome.Так что, возможно, это вопрос JQuery?Спасибо за любой совет.

Answer 1

Работает ли это, если вы удалите float: right из .mask-layer?

Если это так, попробуйте ввести clear: both в .slidedown