下拉菜单推开下面的 div

Question

当悬停菜单时，子菜单会“排斥”下一个 div。

如何将 div 固定在下方？

这是我的代码：

* {
  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;
}

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

Answer 1

将position: absolute应用于子菜单的ul：

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

Answer 2

• 使用绝对定位从文档流中移除菜单栏。
• 将margin-top 应用到 div 以清除菜单栏。

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

Answer 3

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

您的问题之一在这里 - 为 .main-navigation 设置高度。