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-navigation ul ul {
  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-navigation ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: flex;
  //justify-content:flex-end;
}

.main-navigation li {
  flex: 1;
}

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

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

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

.main-navigation ul ul li {
  display: flex;
}

.main-navigation ul ul a {
  padding: .1em;
  display: block;
  flex: 1;
}

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

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

<nav class="main-navigation">
    <ul>
      <li class="current-menu"><a href="#">landscapes</a></li>
      <li><a href="#">menu</a>
            <ul>
            <li><a href="#">sub menu</a></li>
            <li><a href="#">sub menu</a></li>
            <li><a href="#">sub menu</a></li>
            </ul>
      </li>      
      <li class=""><a href="#">people</a></li>
      <li class=""><a href="#">nature</a></li>
      <li class=""><a href="#">abstract</a></li>
      <li class=""><a href="#">urban</a></li>
  </ul>
</nav>

<div class="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-navigation ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: flex;
  /* justify-content:flex-end; */
  position: absolute;              /* remove from document flow */
}
.main-navigation li {
  flex: 1;
}
.main-navigation a {
  display: block;
  text-align: center;
  padding: .1em;
  font: normal small-caps 100 20px/1.8em'Helvetica Neue';
  letter-spacing: .1em;
  box-shadow: 4px 2px 2px grey;
  text-decoration: none;
  background: hsl(0, 100%, 45%);
  color: white;
}
.main-navigation a:hover {
  background: hsl(0, 0%, 45%);
}
.main-navigation ul ul {
  margin: 0;
  padding-left: 0;
  display: none;
}
.main-navigation ul ul li {
  display: flex;
}
.main-navigation ul ul a {
  padding: .1em;
  display: block;
  flex: 1;
}
.main-navigation ul li:hover > ul {
  display: block;
}
.block {
  margin-top: 40px;                  /* clear the menu bar */
  width: 100%;
  height: 60px;
  background-color: grey;
  float: right;
}

<nav class="main-navigation">
  <ul>
    <li class="current-menu"><a href="#">landscapes</a>
    </li>
    <li><a href="#">menu</a>
      <ul>
        <li><a href="#">sub menu</a>
        </li>
        <li><a href="#">sub menu</a>
        </li>
        <li><a href="#">sub menu</a>
        </li>
      </ul>
    </li>
    <li class=""><a href="#">people</a>
    </li>
    <li class=""><a href="#">nature</a>
    </li>
    <li class=""><a href="#">abstract</a>
    </li>
    <li class=""><a href="#">urban</a>
    </li>
  </ul>
</nav>

<div class="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.