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:

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

回答1:

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>

回答2:

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>

回答3:

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

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

来源：https://stackoverflow.com/questions/37332329/drop-down-menu-pushes-away-the-div-below

标签

html

css

css3

navigation

flexbox