如何使用粘性导航栏格式化下拉菜单（无 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

问题是你隐藏了ul 的overflow。

您在<ul> 中添加了overflow: hidden，以便它的背景在<li>s 下扩展，因为<li>s 有float:left，没有特别的原因。

我建议“浮动”<li>s 在它们上使用display:inline-block 或在其父级上使用display:flex。而且，很明显，删除了有问题的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>