html - 使下拉菜单可见

Question

我有一些文本导航栏。只要navbar具有overflow: hidden，它具有background-color，文本就不会溢出navbar，依此类推，一切都很好。但是，使用overflow: hidden时，不会显示下拉菜单的内容。有什么办法让它显示出来吗？

body {
  margin: 0;
  background-color: #fcf3e3;
}

* {
  box-sizing: border-box;
}

.navbar {
  list-style-type: none;
  background-color: #f9eedd;
  box-shadow: 0 5px 5px -6px #c4b29c;
  font-family: Georgia, "Times New Roman", serif;
  width: 100%;
  margin: 0;
  padding: 0 20%;
  z-index: 10;
  position: sticky;
  top: 0;
  overflow: hidden;
}

.navbar li a,
.dropbtn {
  display: block;
  color: #8e8275;
  text-decoration: none;
  transition: 0.3s;
  letter-spacing: 1px;
  font-size: 1.6vmin;
  padding: 1.5vmin 1.3vmin 1.5vmin 0;
  margin: 1.3vmin 1.3vmin 1.3vmin 0;
}

.navbar li.links {
  float: left;
}

.navbar li.rechts {
  float: right;
}

.navbar li a:hover:not(.active) {
  color: #252118;
}

.navbar li a.active {
  text-decoration: underline
}

.navbar .dropdown-content {
  display: none;
  position: absolute;
  background-color: #fef6e9;
  min-width: 160px;
  box-shadow: 0px 2px 5px 0.1px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

.navbar .dropdown-content a {
  text-align: left;
  margin: 0 auto;
  padding: 1.5vmin 1.3vmin;
}

.navbar .dropdown-content a:hover {
  background-color: #f7eedc;
}

.navbar .dropdown:hover .dropdown-content {
  display: block;
}

<ul class="navbar">
  <li class="links"><a href="index.html">Lorem</a></li>
  <li class="dropdown links"><a href="javascript:void(0)" class="dropbtn">ipsum▾</a>
    <div class="dropdown-content">
      <a href="javascript:void(0)">dolor</a>
      <a href="javascript:void(0)">sit</a>
      <a href="javascript:void(0)">amet</a></li>
  <li class="rechts"><a href="javascript:void(0)">Lorem</a></li>
  <li class="rechts"><a href="javascript:void(0)">dolor</a></li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non urna ac odio iaculis pharetra. Suspendisse bibendum sit amet neque id lacinia. Donec at suscipit lorem. Nulla id luctus enim. Vivamus rhoncus tincidunt turpis, vel eleifend urna. Donec
  vestibulum metus et massa ullamcorper, eu feugiat mauris suscipit. Etiam sit amet iaculis neque. Maecenas vitae nibh in ipsum facilisis vulputate sed sit amet ex. Pellentesque molestie lacinia tellus.</p>

Answer 1

如果给navbar一个height并删除overflow: hidden，则可以正常工作。
您可以玩height，但我只是以50px为例。

body {
  margin: 0;
  background-color: #fcf3e3;
}

* {
  box-sizing: border-box;
}

.navbar {
  list-style-type: none;
  background-color: #f9eedd;
  box-shadow: 0 5px 5px -6px #c4b29c;
  font-family: Georgia, "Times New Roman", serif;
  width: 100%;
  margin: 0;
  padding: 0 20%;
  z-index: 10;
  position: sticky;
  top: 0;
  height: 50px;
}

.navbar li a,
.dropbtn {
  display: block;
  color: #8e8275;
  text-decoration: none;
  transition: 0.3s;
  letter-spacing: 1px;
  font-size: 1.6vmin;
  padding: 1.5vmin 1.3vmin 1.5vmin 0;
  margin: 1.3vmin 1.3vmin 1.3vmin 0;
}

.navbar li.links {
  float: left;
}

.navbar li.rechts {
  float: right;
}

.navbar li a:hover:not(.active) {
  color: #252118;
}

.navbar li a.active {
  text-decoration: underline
}

.navbar .dropdown-content {
  display: none;
  position: absolute;
  background-color: #fef6e9;
  min-width: 160px;
  box-shadow: 0px 2px 5px 0.1px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

.navbar .dropdown-content a {
  text-align: left;
  margin: 0 auto;
  padding: 1.5vmin 1.3vmin;
}

.navbar .dropdown-content a:hover {
  background-color: #f7eedc;
}

.navbar .dropdown:hover .dropdown-content {
  display: block;
}

<ul class="navbar">
  <li class="links"><a href="index.html">Lorem</a></li>
  <li class="dropdown links"><a href="javascript:void(0)" class="dropbtn">ipsum▾</a>
    <div class="dropdown-content">
      <a href="javascript:void(0)">dolor</a>
      <a href="javascript:void(0)">sit</a>
      <a href="javascript:void(0)">amet</a></li>
  <li class="rechts"><a href="javascript:void(0)">Lorem</a></li>
  <li class="rechts"><a href="javascript:void(0)">dolor</a></li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non urna ac odio iaculis pharetra. Suspendisse bibendum sit amet neque id lacinia. Donec at suscipit lorem. Nulla id luctus enim. Vivamus rhoncus tincidunt turpis, vel eleifend urna. Donec
  vestibulum metus et massa ullamcorper, eu feugiat mauris suscipit. Etiam sit amet iaculis neque. Maecenas vitae nibh in ipsum facilisis vulputate sed sit amet ex. Pellentesque molestie lacinia tellus.</p>