Javascript 下拉菜单向下移动页面内容

我试图显示一个下拉菜单，但是当我点击按钮显示菜单时，菜单会显示出来，但是页面的内容会向下移动。 我已经测试过其他解决方案（，），但运气不佳。 你可以在屏幕上看到代码

CSS:

我想问题出在CSS上，但我猜不出在哪里

---

谢谢。

如果我理解正确，似乎您需要

位置：固定而不是
位置：相对在
#DIV_4
上

是的，没错。相对位置在#DIV_4移动您的内容

还要做更好的命名，因为阅读代码非常困难

给li标签命名是没有意义的
LIU 6
。使用描述其内容的名称。e、 g.命名您的下拉列表
下拉列表

您可以在下面的演示中尝试不同的位置属性。位置固定和位置绝对在这里工作

但我认为固定位置在这里是最好的


$（函数（）{
$（“#显示下拉列表”）。单击（函数（）{
var$drop=$（'.dropdown'）；
$drop.css（{'position'：$（'#positioning'）.val（）}）；
$drop.toggle（）；
});
});
。下拉列表{
/*位置：固定*/
显示：无；
背景：#fff；
宽度：300px；
}

下拉列表
绝对的
固定的
相对的

测试1
测试2

Lorem ipsum dolor sit amet，是一位杰出的领导者。埃尼安·康莫多·利古拉·埃吉特·多洛。埃尼安·马萨。在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯。Donec quam felis、ultricies nec、pellentesque eu、pretium quis、sem。这是一个很好的例子。Donec pede justo、fringilla vel、aliquet nec、vulputate eget、arcu。在埃尼姆·胡斯托、朗卡斯·乌特、伊佩拉、维尼那提斯·维塔、胡斯托。猫咪的口头禅是一种很好的口头禅。整数tincidunt。克拉斯·达皮布斯。万岁。埃尼安·沃普塔特·埃利芬德·泰勒斯。埃尼安·利古拉、波特提托·欧盟、康塞卡特·维泰、埃利芬德·ac、埃尼姆。阿利奎姆·勒姆·安特、达比布斯·安特、维韦拉·奎斯、费吉亚·阿泰勒斯。长生不老不老。奎斯克·鲁特罗姆。埃涅亚饮食。奥古斯一世。乌兰科乌尔里西斯库拉比图尔酒店。南乙对。艾蒂安·朗库斯。时间之美，调味品之美，自由之美，平等之美。Nam quam nunc，blandit vel，luctus pulvinar，hendrerit id，lorem。这是一个非常重要的时刻。不要为威尼斯人的自由而浪费生命。纳拉姆·奎斯·安特。我坐在那里，或者我坐在那里。杜伊斯·利奥。塞德·弗林斯·莫里斯坐在阿梅特·尼布旁边。大矢状背根。Sed consequat、leo eget bibendum sodales、augue velit cursus nunc，
Fixed似乎解决了这个问题。但如果我向下滚动，下拉列表将固定在屏幕上。因此，最好的解决方案是
位置：绝对
。谢谢你说得对，标签的名称不是最好的。下次我会小心的。
<div id="test">
<ul>
    <li id="LI_1">   
        <label id="LABEL_2">
            <button type="button" id="BUTTON_3">
                Formato
            </button>
        </label>
        <div id="DIV_4">
            <ul id="UL_5">
                <li id="LI_6">
                    3D
                </li>
                <li id="LI_7">
                    Blu-RayDisc
                </li>
                <li id="LI_8">
                    DVD
                </li>
            </ul>
            <span id="SPAN_9">Close</span><span id="SPAN_10"></span>
        </div>
        <div id="DIV_11">
        </div>
    </li>
</ul>
</div>
<div>
   More Text 
</div>

$(document).ready(function(){
$('#LABEL_2').on('click', function(element){        
    $('#DIV_4').toggle();
})
});

#LI_1 {
box-sizing: border-box;
color: rgb(102, 102, 102);
float: left;    
position: relative;
width: 100%;
perspective-origin: 74.078125px 92.5px;
transform-origin: 74.078125px 92.5px;
border: 0px none rgb(102, 102, 102);
font: normal normal normal normal 13px/20px Helvetica, Arial, sans-serif;
list-style: none outside none;
margin: 0px 0px 10px;
outline: rgb(102, 102, 102) none 0px;
overflow: hidden;
padding: 0px 3px 0px 0px;
}
 #LABEL_2 {
color: rgb(102, 102, 102);
cursor: pointer;
display: block;
height: 28px;
text-align: left;
width: 145.15625px;
perspective-origin: 72.578125px 14px;
transform-origin: 72.578125px 14px;
border: 0px none rgb(102, 102, 102);
font: normal normal bold normal 13px/16.8999996185303px Helvetica, Arial, sans-serif;
list-style: none outside none;
margin: 0px 0px 10px;
outline: rgb(102, 102, 102) none 0px;
}
 #BUTTON_3 {
color: rgb(204, 204, 204);
cursor: pointer;
height: 28px;
text-transform: uppercase;
vertical-align: middle;
width: 67.609375px;
perspective-origin: 33.796875px 14px;
transform-origin: 33.796875px 14px;
background: rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box;
border: 1px solid rgb(221, 221, 221);
border-radius: 3px 3px 3px 3px;
font: normal normal bold normal 11px/20px Helvetica, Arial, sans-serif;
list-style: none outside none;
margin: 0px 0px 0px 5px;
outline: rgb(204, 204, 204) none 0px;
overflow: hidden;
padding: 3px 5px;
}
 #DIV_4 {     
box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 3px 0px;
box-sizing: border-box;
color: rgb(102, 102, 102);    
position: relative;
text-align: left;
width: 130.640625px;
perspective-origin: 65.3125px 71px;
transform-origin: 65.3125px 71px;
background: rgb(253, 251, 228) none repeat scroll 0% 0% / auto padding-box border-box;
border: 1px solid rgb(205, 196, 168);
border-radius: 2px 2px 2px 2px;
font: normal normal normal normal 13px/20px Helvetica, Arial, sans-serif;
list-style: none outside none;
margin: 0px 0px 5px;
outline: rgb(102, 102, 102) none 0px;
padding: 10px;
}
 #UL_5 {
color: rgb(102, 102, 102);
height: 120px;
text-align: left;
width: 108.640625px;
perspective-origin: 54.3125px 60px;
transform-origin: 54.3125px 60px;
border: 0px none rgb(102, 102, 102);
font: normal normal normal normal 13px/20px Helvetica, Arial, sans-serif;
margin: 0px;
outline: rgb(102, 102, 102) none 0px;
overflow: hidden;
padding: 0px;
}
 #LI_6 {
background-position: 0px 0px;
box-sizing: border-box;
color: rgb(204, 204, 204);
display: block;
height: 20px;
position: relative;
text-shadow: rgb(255, 255, 255) 1px 1px 0px;
width: 108.640625px;
perspective-origin: 54.3125px 10px;
transform-origin: 54.3125px 10px;
background: rgba(0, 0, 0, 0) url(http://edv.com/modules/mod_jak2filter/assets/css/icon-none.png) no-repeat scroll 0px 0px / auto padding-box border-box;
border: 0px none rgb(204, 204, 204);
font: normal normal bold normal 11px/20px Helvetica, Arial, sans-serif;
margin: 0px 0px 20px;
outline: rgb(204, 204, 204) none 0px;
padding: 0px 3px 0px 20px;
}
 #LI_7, #LI_8 {
background-position: 0px 0px;
box-sizing: border-box;
color: rgb(102, 102, 102);
display: block;
height: 20px;
position: relative;
text-shadow: rgb(255, 255, 255) 1px 1px 0px;
width: 108.640625px;
perspective-origin: 54.3125px 10px;
transform-origin: 54.3125px 10px;
background: rgba(0, 0, 0, 0) url(http://edv.com/modules/mod_jak2filter/assets/css/icon-none.png) no-repeat scroll 0px 0px / auto padding-box border-box;
border: 0px none rgb(102, 102, 102);
font: normal normal bold normal 11px/20px Helvetica, Arial, sans-serif;
margin: 0px 0px 20px;
outline: rgb(102, 102, 102) none 0px;
padding: 0px 3px 0px 20px;
}
 #SPAN_9 {
background-position: 50% 50%;
color: rgb(102, 102, 102);
display: block;
height: 12px;
position: absolute;
right: 8px;
text-align: left;
text-indent: -12987px;
top: 8px;
width: 12px;
align-self: stretch;
perspective-origin: 7px 7px;
transform-origin: 7px 7px;
background: rgb(204, 204, 204) url(http://edv.com/modules/mod_jak2filter/assets/css/btn-close.png) no-repeat scroll 50% 50% / auto padding-box border-box;
border: 1px solid rgb(153, 153, 153);
border-radius: 3px 3px 3px 3px;
font: normal normal normal normal 13px/20px Helvetica, Arial, sans-serif;
list-style: none outside none;
outline: rgb(102, 102, 102) none 0px;
}
 #SPAN_10 {
color: rgb(102, 102, 102);
display: block;
height: 12px;
left: 10px;
position: absolute;
text-align: left;
top: -12px;
width: 14px;
align-self: stretch;
perspective-origin: 7px 6px;
transform-origin: 7px 6px;
background: rgba(0, 0, 0, 0) url(http://edv.com/modules/mod_jak2filter/assets/css/arrow.png) no-repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(102, 102, 102);
font: normal normal normal normal 13px/20px Helvetica, Arial, sans-serif;
list-style: none outside none;
outline: rgb(102, 102, 102) none 0px;
}

 #DIV_11 {
color: rgb(102, 102, 102);
text-align: left;
width: 145.15625px;
perspective-origin: 72.578125px 0px;
transform-origin: 72.578125px 0px;
border: 0px none rgb(102, 102, 102);
font: normal normal normal normal 13px/20px Helvetica, Arial, sans-serif;
list-style: none outside none;
outline: rgb(102, 102, 102) none 0px;
}
 #SCRIPT_12 {
color: rgb(102, 102, 102);
text-align: left;
border: 0px none rgb(102, 102, 102);
font: normal normal normal normal 13px/20px Helvetica, Arial, sans-serif;
list-style: none outside none;
outline: rgb(102, 102, 102) none 0px;
}