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

Question

我想显示一个下拉菜单，但是当我点击显示菜单的按钮时，显示了菜单，但是页面的内容被下移了。我测试了其他解决方案 (content moving with drop down, drop down content move, drop down menus pushing content down)，但没有成功。您可以在 JSfiddle.

上查看代码

<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>

Javascript:

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

CSS:

#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;
}

我认为问题出在 CSS，但我猜不出哪里。

谢谢。

Answer 1

如果我没理解错的话，在 #DIV_4 上你似乎需要 position: fixed; 而不是 position: relative;。

http://jsfiddle.net/zkos7kwz/1/

Answer 2

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

还要更好地命名，因为很难阅读您的代码。

给 li-tag 命名没有意义 LI_6。使用描述其内容的名称。例如将您的下拉菜单命名为 dropdown.

您可以在下方和此处 jsFiddle 的演示中尝试不同的位置属性。固定位置和绝对位置在这里起作用。

不过我觉得position fixed在这里最好

$(function() {
    $('#showDropdown').click(function() {
        var $drop = $('.dropdown');
        $drop.css({'position': $('#positioning').val()});
        $drop.toggle();
    });
});

.dropdown {
    /*position: fixed;*/
    display: none;
    background: #fff;
    width: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="showDropdown">dropdown</button>

<select id="positioning">
    <option value="absolute">absolute</option>
    <option value="fixed">fixed</option>
    <option value="relative">relative</option>
</select>

<div class="dropdown">
    <ul>
        <li>test 1</li>
        <li>test 2</li>
    </ul>
</div>
<div>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</div>

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

Drop down menu moving down page content

html

javascript

css

jquery

drop-down-menu