Drop Down Menu Pushes Away The Div Below

When hovering the menu, the submenu 'repulses' the next div. How is it possible to keep the div fixed in position underneath? Here is my code:

Solution 1:

Apply position: absolute to the ulof the submenu:

.main-navigationulul {
  margin: 0;
  padding-left: 0;
  display: none;
  position: absolute;
}

* {
  box-sizing: border-box;
}

body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.main-navigation {
  width: 60%;
  margin: 0 auto;
}

.main-navigationul {
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: flex;
  //justify-content:flex-end;
}

.main-navigationli {
  flex: 1;
}

.main-navigationa {
  display: block;
  text-align: center;
  padding: .1em;
  font: normal small-caps 10020px/1.8em'Helvetica Neue';
  letter-spacing: .1em;
  box-shadow: 4px2px2px grey;
  text-decoration: none;
  background: hsl(0, 100%, 45%);
  color: white;
}

.main-navigationa:hover {
  background: hsl(0, 0%, 45%);
}

.main-navigationulul {
  margin: 0;
  padding-left: 0;
  display: none;
  position: absolute;
}

.main-navigationululli {
  display: flex;
}

.main-navigationulula {
  padding: .1em;
  display: block;
  flex: 1;
}

.main-navigationulli:hover > ul {
  display: block;
}

.block {width:100%;height:60px;background-color:grey;float:right;}

<navclass="main-navigation"><ul><liclass="current-menu"><ahref="#">landscapes</a></li><li><ahref="#">menu</a><ul><li><ahref="#">sub menu</a></li><li><ahref="#">sub menu</a></li><li><ahref="#">sub menu</a></li></ul></li><liclass=""><ahref="#">people</a></li><liclass=""><ahref="#">nature</a></li><liclass=""><ahref="#">abstract</a></li><liclass=""><ahref="#">urban</a></li></ul></nav><divclass="block"></div>

Solution 2:

• Use absolute positioning to remove the menu bar from the document flow.
• Apply margin-top to div to clear the menu bar.

* {
  box-sizing: border-box;
}
body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.main-navigation {
  width: 60%;
  margin: 0 auto;
  position: relative;              /* establish nearest positioned ancestor for
                                      absolute positioning */
}
.main-navigationul {
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: flex;
  /* justify-content:flex-end; */position: absolute;              /* remove from document flow */
}
.main-navigationli {
  flex: 1;
}
.main-navigationa {
  display: block;
  text-align: center;
  padding: .1em;
  font: normal small-caps 10020px/1.8em'Helvetica Neue';
  letter-spacing: .1em;
  box-shadow: 4px2px2px grey;
  text-decoration: none;
  background: hsl(0, 100%, 45%);
  color: white;
}
.main-navigationa:hover {
  background: hsl(0, 0%, 45%);
}
.main-navigationulul {
  margin: 0;
  padding-left: 0;
  display: none;
}
.main-navigationululli {
  display: flex;
}
.main-navigationulula {
  padding: .1em;
  display: block;
  flex: 1;
}
.main-navigationulli:hover > ul {
  display: block;
}
.block {
  margin-top: 40px;                  /* clear the menu bar */width: 100%;
  height: 60px;
  background-color: grey;
  float: right;
}

<navclass="main-navigation"><ul><liclass="current-menu"><ahref="#">landscapes</a></li><li><ahref="#">menu</a><ul><li><ahref="#">sub menu</a></li><li><ahref="#">sub menu</a></li><li><ahref="#">sub menu</a></li></ul></li><liclass=""><ahref="#">people</a></li><liclass=""><ahref="#">nature</a></li><liclass=""><ahref="#">abstract</a></li><liclass=""><ahref="#">urban</a></li></ul></nav><divclass="block"></div>

Solution 3:

.main-navigation {
  width: 60%;
  margin: 0 auto;
  height:42px; /* << pew-pew! */
}

one of your problems is here - set height for .main-navigation.