Drop down menu moving down page content

Question

I'm trying to display a drop down menu, but when I click on the button to display the menu, the menu is shown, but the content of the page is moved down. I've tested other solutions (content moving with drop down, drop down content move, drop down menus pushing content down), with no luck. You can see the code on 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;
}

I think the problem is on the CSS, but I can't guess where.

Thanks.

score 1 · Answer 1 · answered Jan 25 '15 at 23:40

1

If I understand correctly, seems that you need position: fixed; rather than position: relative; on #DIV_4.

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

answered Jan 25 '15 at 23:40

EternalHour

8,308
6
38
57

score 1 · Accepted Answer · answered Jan 26 '15 at 00:07

Yes, that's right . Position relative at #DIV_4 moves your content.

Also do better naming because it's really hard to read your code.

It makes no sense to name a li-tag LI_6. Use a name that describes it's content. e.g. name your dropdown dropdown.

You can try out the different position attributes in the demo below and here at jsFiddle. Position fixed and position absolute is working here.

But I think position fixed is the best here.

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

Fixed seems to solve the problem. But if I scroll down, the dropdown will be fix on the screen. So the best solution is `position: absolute`. Thanks. You're right, the name of the tags are not the best. I'll take care the next time. — RubenPHP, Jan 26 '15 at 17:42

Drop down menu moving down page content

2 Answers2