CSS Drop-Down Menus Pushing Page Content Down

How to stop dropdown menu from pushing content down?

Add this piece of css at the end of your style file

    nav ul li {
        position: relative;
    }

    nav ul ul {
        position: absolute;
        width: 100%;
    }

For sub-menu to not push the content down it needs to have position: absolute style. Other bits of css is to fix the styling and sub-menu width.

CSS Dropdown pushes content down page

Add position: absolute to the menu. Also make sure to update the top and background:

.top-nav ul ul {
    display: none;
    left: 0;
    /* Changes below */
    float: none;
    position: absolute;
    top: 62px;
    background: #bb1e10;
}

Preview

before

after

Update

Add this to the .header:

.header {
    position: relative;
    z-index: 10000;
}

Fixes the last links:

preview

Drop down menu moving down page content

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>

CSS and HTML- Dropdown Menu Pushing Down Content-- Position: relative and absolute not working

I cleaned up your code to remove all the stuff from the HTML that isn't relevant to this question, to avoid distractions. Then I edited the CSS.

Two things:

You need to remove all those slashes in the CSS because they are making it invalid, which causes the next block of styles after them to not get applied.
To get the relative/absolute positioning combo to work correctly, you need to make sure you are positioning the right things.

Before, you were focusing on the menu items themselves – that's what you were switching from display: none to display: block, and I suspect that's what you were trying to absolutely position as well. If you absolutely position all the menu items and give them all styles of, say, top: 0; left: 0, they will all sit on top of each other. Instead, try positioning the list (i.e., ul.sub-menu) relative to its parent list item (i.e., li.dropdown).

From there, you can use the immediate sibling selector + to change the styling on hover. So when you hover a link, the sub menu immediately after it appears.

Last thing to do to make sure you can actually see this in action is to give the dropdown a background color, so I've done that below as well.

#menu-apl {  background-color: #63afe6;  width: 100%;}li a {  display: block;  color: white;  text-align: center;  margin: 10px;  padding-left: 25px;  padding-right: 25px;  text-decoration: none;}.dropdown {  list-style: none;  background-color: #63afe6;  float: left;  display: inline-block;  color: white;  background-color: #63afe6;  position: relative;}.dropdown-item {  width: 200px;  list-style: none;}.sub-menu {  display: none;  position: absolute;  top: 100%;  left: 0;  background-color: #63afe6;}.dropdown a:hover + .sub-menu {  display: block;}

<ul class="menu">  <li class="dropdown"><a href="https://www.alexisrichard.com/home/">Home</a></li>  <li class="dropdown">    <a href="https://www.alexisrichard.com/about/">About</a>    <ul class="sub-menu">      <li class="dropdown-item"><a href="https://www.alexisrichard.com/employment/">Employment</a></li>      <li class="dropdown-item"><a href="https://www.alexisrichard.com/library-board/">Library Board</a></li>      <li class="dropdown-item"><a href="https://www.alexisrichard.com/friends-of-the-library/">Friends of the Library</a></li>    </ul>  </li>  <li class="dropdown">    <a href="https://www.alexisrichard.com/services/">Services</a>    <ul class="sub-menu">      <li class="dropdown-item"><a href="https://www.alexisrichard.com/request-a-book/">Request a Book</a></li>      <li class="dropdown-item"><a href="https://www.alexisrichard.com/calendar/">Calendar</a></li>      <li class="dropdown-item"><a href="https://www.alexisrichard.com/meeting-room-policy/">Meeting Room Policy</a></li>      <li class="dropdown-item"><a href="https://www.alexisrichard.com/interlibrary-loan/">Interlibrary Loan</a></li>      <li class="dropdown-item"><a href="https://www.alexisrichard.com/fines-and-fees/">Fines and Fees</a></li>      <li class="dropdown-item"><a href="https://www.alexisrichard.com/ebook-catalog/">Ebook Catalog</a></li>      <li class="dropdown-item"><a href="https://www.alexisrichard.com/databases/">Databases</a></li>      <li class="dropdown-item"><a href="https://www.alexisrichard.com/card-catalog/">Card Catalog</a></li>      <li class="dropdown-item"><a href="https://www.alexisrichard.com/library-policies/">Library Policies</a></li>    </ul>  </li>  <li class="dropdown"><a href="https://www.alexisrichard.com/locations/">Locations</a></li></ul>

Make drop down menu push content down on click

Your issue, as you suspected, is the positioning. Unfortunately, if you use position: absolute, .dropdown-menu is removed from the flow of the document, winding up on top of anything beneath it rather than moving it out of the way. If you use position: relative it forces it's parent to resize messing up your menu. As far as I know there is no solution to this problem with pure CSS. However, there is a few solutions with javascript, and since JQuery is already being used by bootstrap, we can just use that.

In order to move the content down when dropdown-menu is clicked you need to change either .container, the content, itself, or the parent/grandparent element that the dropdown-menu is relative to. I chose to add margin-bottom the grandparent, which in this case, is the nav element. You could just as easily add margin-top to .container. Either way you need to set the margin equal to the height of .dropdown-menu which is set to 120px. I created the following rule to achieve this:

nav.navbar.open {
  margin-bottom: 120px;
}

The extra class .open will be added by JQuery when li.dropdown is clicked. I just used this quick bit of JQuery to acomplish this:

$("li.dropdown").click(function() {
  $("nav.navbar" ).toggleClass( "open");
});

That's all that is needed. When li.dropdown is clicked a .open is added to the nav element which increases its bottom margin to the same height of .dropdown-menu. The margin doesn't affect .dropdown-menu since it's absolutely positioned and instead only pushes down .container just as if .dropdown-menu was not removed from the document flow. The reason for using li.dropdown and not #menu-trigger (the link itself) is because if you use the link, and then click on .dropdown-menu the menu is dismissed, but the margin remains. By using the parent of dropdown-menu the click event is still registered whenever a child of the parent is clicked. If a sibling is used then the trigger doesn't happen.

$("li.dropdown").click(function() {  $("nav.navbar").toggleClass("open");});

body {  margin: 0;  padding: 0;  font-family: "Helvetica", "Arial", sans-serif;  font-weight: 500;  font-style: normal;  font-size: 12px;  line-height: 1.5;}.navbar-default {  background-color: #ffffff;}.navbar {  min-height: 65px;  padding-top: 5px;  margin-bottom: 0px;  border-bottom: solid 2px #eee;}.navbar-header {  margin-top: -12px;}.navbar-brand {  padding-top: 0px !important;}/* for button placement*/
.navbar-toggle {  margin-top: 26px;}/*for collapsed navbar*/
.navbar-collapse {  margin-top: 12px;}.site-logo {  max-width: 135px;  min-width: 120px;}.navbar-default .navbar-nav > li > a {  text-transform: uppercase;  background-color: #ffffff !important;  color: #333333;}.navbar-default .navbar-nav > li > a:hover {  color: #3381d0;}.navbar-default .navbar-nav>li>a:hover,.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:focus,.navbar-default .navbar-nav>.active>a:hover {  background-color: #ffffff;  border-bottom: 2px solid #ff5d1c;  color: #ff5d1c;  bottom: -2px;}.nav>li {  position: static !important;}/* For navbar dropdown*/
.navbar .dropdown-menu {  min-width: 1349px;  width: 100%;  height: 120px;  margin-top: 51px;  z-index: 1;  left: 0;  text-align: center;  padding-right: 10px;  position: absolute;  list-style-type: none;  border-top: 2px solid #ff5d1c;  border-bottom: 2px solid #333333;  border-right: #ffffff;  border-radius: 0;  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);  border-left: 0;  background-color: #337ab7;}.dropdown-menu {  padding-left: 10px;  padding-right: 10px;  position: relative;  list-style-type: none;}.navbar .dropdown-menu li {  margin: 0;  padding: 0;  display: inline-block;}.dropdown-menu > li > a {  color: #ffffff;  line-height: 75px;  padding: 3px;}.dropdown-menu > li > a:hover {  color: #333333 !important;}.dropdown-menu > li > a:hover {  color: #ffffff;  background-color: #337ab7;}.m-pub {  display: inline-block;  margin: 3px 40px 0;  font-size: 13px;  font-weight: 400;  text-transform: uppercase;  letter-spacing: .14em;  color: white;  -webkit-transition: none;  -moz-transition: none;  -ms-transition: none;  -o-transition: none;  transition: none;  position: relative;}.m-pub:after,.m-pub:focus {  color: #ffffff;  background-color: #337ab7;}.dropdown-menu li .m-pub:hover:after {  content: '';  position: absolute;  left: 50%;  margin-left: -10px;  margin-top: 55px;  border-left: 0;  border-bottom: 17px solid transparent;  border-top: 17px solid transparent;  border-left: 14px solid #333333;  transform: rotate(-90deg);  background: none;}nav.navbar.open {  margin-bottom: 120px;}

<head>  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /></head>
<body>  <nav class="navbar navbar-default navbar-static-top">    <div class="container-fluid">      <div class="navbar-header">        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">          <span class="sr-only">Toggle Navigation</span>          <span class="icon-bar"></span>          <span class="icon-bar"></span>          <span class="icon-bar"></span>        </button>        <a class="navbar-brand" href="#"></a>      </div>      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">        <ul class="nav navbar-nav" id="nav">          <li class="nav-link active"><a href="#">Link</a>          </li>          <li class="nav-link"><a href="#">Link</a>          </li>          <li class="nav-link"><a href="#">Link</a>          </li>          <li class="dropdown">            <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="menu-trigger">Drop-Down Menu<i class="fa fa-angle-down flipped"></i></a>            <ul class="dropdown-menu" id="menu">              <li class="nav-link">                <a href="#" class="m-pub"><i class="fa fa-microphone fa-2x"></i>Option</a>              </li>              <li class="nav-link">                <a href="" class="m-pub"><i class="fa fa-newspaper-o fa-2x"></i>Option</a>              </li>            </ul>          </li>          <li class="nav-link"><a href="#">Link</a>          </li>          <li class="nav-link"><a href="#">Link</a>          </li>        </ul>      </div>    </div>  </nav>  <div class="container" style="background: red;height:100px; width: 100%;">  </div>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script></body>