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>之下，因为<li>具有float:left，没有特别说明。原因。

我建议使用<li>对其上的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>

{{1}}

如何使用导航栏（无jQuery）格式化下拉菜单

1 个答案: