css - 如何使用粘性导航栏格式化下拉菜单(无 jQuery)

Question

我正在尝试建立一个带有粘性导航栏的个人网站，该导航栏在某些元素下还有一个下拉菜单。导航栏“固定”但不会出现下拉菜单。我发现问题围绕着将下拉内容的位置设置为绝对位置以及将创建“导航栏”的 ul 的溢出设置为隐藏。 (附:我对 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>我们有float:left ，没有特别的原因。

我建议“ float ”<li>使用 display:inline-block在他们身上或display:flex在他们的 parent 身上。而且，显然，删除违规的 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>