下拉菜单可将以下div推开 [英] drop down menu pushes away the div below

问题描述

将鼠标悬停在菜单上时，子菜单会排斥"下一个格.

When hovering the menu, the submenu "repulses" the next div.

如何将div固定在下面的位置?

How is it possible to keep the div fixed in position underneath?

这是我的代码:

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

推荐答案

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

这篇关于下拉菜单可将以下div推开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！