铺设下拉菜单

Question

我想在内容上放置下拉菜单。现在，如果我单击“汉堡包”图标，则整个站点都将关闭，但是如果我单击“汉堡包”图标，我想修复它。是否使用z-index或其他？

查看我的屏幕截图：

点击前

点击后

nav {
  width: 100%;
  display: none;
}

ul {
  width: 80%;
  margin: 0 auto;
  padding: 0;
  background-color: #d2141a;
  box-shadow: 1px 1px #000;
  border-top: 4px solid #f4363c;
}

ul,
li {
  display: block;
  padding: 20px;
  text-align: center;
  border-bottom: 1px solid #c1030a;
}

ul,
li:hover {
  background-color: #c1030a;
}

ul,
li,
a {
  text-decoration: none;
  color: #FFF;
  font-weight: 700;
}

.toggle {
  width: 100%;
  padding: 30px 20px;
  text-align: center;
  box-sizing: border-box;
  color: #c72c1b;
  font-size: 25px;
  display: block;
  cursor: pointer;
}

.active {
  display: block;
}

<div class="toggle">
  <i class="fas fa-bars">A</i>
</div>
<nav>
  <ul>
    <li><a href="#">Restaurant</a></li>
    <li><a href="#">Progress</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Answer 1

您必须添加：

nav{position:absolute}