Question

我正在尝试为要制作课程的Web应用程序添加导航栏，并且我想在其中使用下拉菜单（要包含的内容太多，无法将所有内容直接）。

我希望将栏固定在页面顶部，但是当我放入position: fixed;时，下拉菜单停止工作。有没有办法解决？我是将position: fixed;放在错误的位置，还是与可能包含position: absolute;的下拉内容冲突？？

（我是Web知识的新手，所以如果您看到其他我可以更改/批准的内容，请告诉我！非常感谢您的建议）

ul {
  list-style-type: none;
  margin: 0;
  top: 0;
  position: fixed;
  width: 100%;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a,
.dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover,
.dropdown:hover .dropbtn {
  background-color: #111;
}

li.dropdown {
  display: inline-block;
}

.active {
  background-color: #4CAF50;
}

.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;
}

<html>

<head>
  </br>
  </br>

  <ul>
    <li><a class="active" href="/homePageAgent">Home</a></li>
    <li class="dropdown">
      <a href="javascript:void(0)" class="dropbtn">View Pages</a>
      <div class="dropdown-content">
        <a href="/agentViewFlights">View Booked Flights</a>
        <a href="/agentTopCustomers">View Top Customers</a>
      </div>
    </li>
    <li style="float:right"><a href="/logout">Logout</a></li>
  </ul>
</head>

</html>

基本上，用鼠标悬停时，“查看页面”应该成为一个下拉菜单，如果我取出“ position：fixed;”，它也会变成下拉菜单。线，但是...我希望位置固定。

Answer 1

将导航置于图层中。并使该层具有固定位置。

.navbar-top {
  margin: 0;
  padding: 0;
  width: 100%;
  top: 0;
  position: fixed;
}

ul {
  list-style-type: none;
  margin: 0;
  top: 0;
  /*position: fixed;*/
  width: 100%;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a,
.dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover,
.dropdown:hover .dropbtn {
  background-color: #111;
}

li.dropdown {
  display: inline-block;
}

.active {
  background-color: #4CAF50;
}

.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;
}

<html>

<head>
</head>

<body>
  <div class="navbar-top">
    <ul>
      <li><a class="active" href="/homePageAgent">Home</a></li>
      <li class="dropdown">
        <a href="javascript:void(0)" class="dropbtn">View Pages</a>
        <div class="dropdown-content">
          <a href="/agentViewFlights">View Booked Flights</a>
          <a href="/agentTopCustomers">View Top Customers</a>
        </div>
      </li>
      <li style="float:right"><a href="/logout">Logout</a></li>
    </ul>
  </div>
</body>

</html>

Answer 2

您不应在position:fixed上申请UL
您可以使用div扭曲UL并在其上应用固定的位置。
这是实现此（live demo）的一种方法：

.mainheader {
  height: 25px;
  position: fixed;
  display: block;
  z-index: 10;
  background: #333;
  width: 100%;
  font-size: 14px;
  top: 0;
  font-family: Calibri;
}

.nav {
  width: 100%;
  height: 25px;
  background: #333;
  margin: 0 auto;
}

ul {
  list-style-type: none;
  margin: 0;
  top: 0;
  width: 100%;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a,
.dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover,
.dropdown:hover .dropbtn {
  background-color: #111;
}

li.dropdown {
  display: inline-block;
}

.active {
  background-color: #4CAF50;
}

.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;
}

<html>

<head>
</head>

<body>
  <div class="mainheader">
    <div class="nav">
      <ul>
        <li>
          <a class="active" href="/homePageAgent">Home
                </a>
        </li>
        <li class="dropdown">
          <a href="javascript:void(0)" class="dropbtn">View Pages
                </a>
          <div class="dropdown-content">
            <a href="/agentViewFlights">View Booked Flights
                  </a>
            <a href="/agentTopCustomers">View Top Customers
                  </a>
          </div>
        </li>
        <li style="float:right">
          <a href="/logout">Logout
                </a>
        </li>
      </ul>
    </div>
  </div>
</body>

</html>

Answer 3

您可以删除ul {overflow：hidden;}

尝试使用下拉菜单修复导航栏到页面顶部

3 个答案: