如何使用粘性导航栏格式化下拉菜单（没有jQuery）

Question

我正在尝试建立一个带有粘性导航栏的个人网站，该导航栏在某些项目下也有一个下拉菜单。导航栏“粘贴”，但下拉菜单不会出现。我发现问题围绕着将下拉内容的位置设置为绝对以及将创建“导航栏”的ul的溢出设置为隐藏。 （P.S。我对CSS比较新，所以我提前道歉）。

到目前为止，我已经尝试将下拉内容的位置更改为“已修复”，但这只能在向下滚动之前正常工作。向下滚动（如预期的那样）它向下保持相同的距离，并且不会调整到导航栏的新位置。另外，我已将导航栏的溢出更改为可见。下拉工作正常，但导航栏的格式完全搞砸了。从本质上讲，所有这些变化都使问题变得“更好”，但只会产生新的问题。

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: -webkit-sticky;
  /* Safari */
  position: sticky;
  width: 100%;
  top: 0px;
}

li {
  float: left;
}

li a,
.dropbtn {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover,
.dropdown:hover .dropbtn {
  background-color: rgb(228, 40, 40);
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #f1f1f1
}

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

<header>
  <h1><a id="myNameTop" href="/">JK</a></h1>
</header>

<ul>
  <li class="nav-item"><a class="nav-link" href="/resume">Resumé</a></li>
  <li class="dropdown nav-item">
    <a class="dropbtn" href="/code">Code</a>
    <div class="dropdown-content">
      <a href="/gitHub">GitHub</a>
      <a href="/javaScriptProjects">Embeded JavaScript Projects</a>
    </div>
  </li>
  <li class="nav-item"><a class="nav-link" href="/graphicDesign">Graphic Design</a></li>
  <li class="nav-item"><a class="nav-link" href="/contact">Contact</a></li>
</ul>

目前，我将鼠标悬停在导航栏项目上，并且下拉项目根本没有下降（无论我是否滚动）。

我希望在悬停时看到下拉菜单。

Answer 1

问题是你隐藏了overflow的ul。

你将overflow: hidden添加到<ul>，以便它的背景在所有它的<li>s下延伸，因为<li>s有float:left，没有特别的原因。

我建议使用<li>或他们父母的display:inline-block“漂浮”display:flexs。而且，显然，删除有问题的overflow:hidden。

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  /* overflow: hidden; */
  background-color: #333;
  position: -webkit-sticky;
  /* Safari */
  position: sticky;
  width: 100%;
  top: 0px;
}

li {
  /* float: left; */
  display: inline-block;
}

li a,
.dropbtn {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover,
.dropdown:hover .dropbtn {
  background-color: rgb(228, 40, 40);
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #f1f1f1
}

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

body {
  margin: 0;
  min-height: 200vh;
}

<header>
  <h1><a id="myNameTop" href="/">JK</a></h1>
</header>

<ul>
  <li class="nav-item"><a class="nav-link" href="/resume">Resumé</a></li>
  <li class="dropdown nav-item">
    <a class="dropbtn" href="/code">Code</a>
    <div class="dropdown-content">
      <a href="/gitHub">GitHub</a>
      <a href="/javaScriptProjects">Embeded JavaScript Projects</a>
    </div>
  </li>
  <li class="nav-item"><a class="nav-link" href="/graphicDesign">Graphic Design</a></li>
  <li class="nav-item"><a class="nav-link" href="/contact">Contact</a></li>
</ul>