使下拉菜单可见

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>

Answer 2

您必须删除overflow: hidden并添加display: none，这样您的下拉菜单才会显示。
当您将hover带类的li添加到下拉列表中时，您将添加display: block来显示下拉列表。

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

.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 {
  position: absolute;
  background-color: #fef6e9;
  min-width: 160px;
  box-shadow: 0px 2px 5px 0.1px rgba(0, 0, 0, 0.2);
  z-index: 10;
  display: none;
  /* add this and remove overflow hidden*/
}

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

.dropdown:hover>div {
  display: block;
}


/* add this */

<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>
    </div>
  </li>
  <li class="rechts"><a href="javascript:void(0)">Lorem</a></li>
  <li class="rechts"><a href="javascript:void(0)">dolor</a></li>
</ul>

Answer 3

有了您在评论中提供给我的信息，我可以通过删除overflow: hidden并提供navbar position: fixed而不是position: sticky来解决此问题。 overflow: hidden强制div隐藏所有出现在其外部的元素，因此您无法保留它。

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

* {
  box-sizing: border-box;
}

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

.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 {
  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>
    </div>
  </li>
  <li class="rechts"><a href="javascript:void(0)">Lorem</a></li>
  <li class="rechts"><a href="javascript:void(0)">dolor</a></li>
</ul>