导航栏上的下拉菜单在 Safari 中不起作用，但在 Chrome 中起作用

Question

基本上，我的导航栏在 Chrome 中按预期工作，但是当切换到另一个浏览器（在本例中为 Safari）时它不起作用。只有在页面顶部时。向下滚动时，它不显示下拉选项。

最初，我遇到了一个问题，即下拉菜单在向下滚动时无法正常工作（粘性导航栏），但此后在 Chrome 中已得到修复。我知道这可能是一个问题，因为不同浏览器缺少像“-webkit-”或“-moz-”这样的标签，我只是不确定应该在哪里添加它们。

p {
  padding: 13px;
  text-align: justify;
}

.nav {
  position: fixed;
  width: 100%;
  top: 0;
}

.nav a {
  position: fixed;
  background-color: #333;
  z-index: 9999;
  overflow: show;
}

.nav a.home-btn {
  position: relative;
}

.nav a.logout-btn {
  position: relative;
}

#head1 {
  text-align: center;
  background-color: black;
  color: white;
  font-family: sans-serif;
  text-decoration: none;
  font-size: 30px;
  padding: 10px 14px;
}

* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  list-style: none;
  text-decoration: none;
  z-index: 9999;
}

.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: sans-serif;
  z-index: 9999;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.profile-dropdown {
  float: left;
  overflow: hidden;
}

.profile-dropdown .profile-btn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

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

.profile-content a {
  float: none;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  position: relative;
}

.profile-content a:hover {
  background-color: gray;
}

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

.search-dropdown {
  float: left;
  overflow: hidden;
}

.search-dropdown .search-btn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.search-btn:hover,
.profile-btn:hover,
.home-btn:hover,
.logout-btn:hover {
  background-color: #2ecc71;
}

.navbar a.logout-btn {
  float: right;
}

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

.search-content a {
  float: none;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  position: relative;
}

.search-content a:hover {
  background-color: gray;
}

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

.listings-dropdown {
  float: left;
  overflow: hidden;
}

.listings-dropdown .listings-btn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

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

.listings-content a {
  float: none;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  position: relative;
}

.listings-content a:hover {
  background-color: gray;
}

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

.listings-btn:hover {
  background-color: #2ecc71;
}

.messages-dropdown {
  float: left;
  overflow: hidden;
}

.messages-dropdown .messages-btn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

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

.messages-content a {
  float: none;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  position: relative;
}

.messages-content a:hover {
  background-color: gray;
}

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

.messages-btn:hover {
  background-color: #2ecc71;
}

.settings-dropdown {
  float: left;
  overflow: hidden;
}

.settings-dropdown .settings-btn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

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

.settings-content a {
  float: none;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  position: relative;
}

.settings-content a:hover {
  background-color: gray;
}

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

.settings-btn:hover {
  background-color: #2ecc71;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

<html>
<link rel="stylesheet" href="../css/updateInfo.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<body>

  <div class="header">
    <h1 id="head1">Lost And Found</h1>
  </div>
  <div class="navbar">
    <a href="mainPage.html" class="home-btn">Home</a>

    <div class="profile-dropdown">
      <button class="profile-btn">Profile <i class="fa fa-caret-down"></i></button>
      <div class="profile-content">
        <a href="#">Your Listings</a>
        <a href="updateInfo.html">Update Info</a>
      </div>
    </div>

    <div class="search-dropdown">
      <button class="search-btn">Search <i class="fa fa-caret-down"></i></button>
      <div class="search-content">
        <a href="#">Search Lost</a>
        <a href="#">Search Found</a>
      </div>
    </div>

    <div class="listings-dropdown">
      <button class="listings-btn">Listings <i class="fa fa-caret-down"></i></button>
      <div class="listings-content">
        <a href="#">Report Lost</a>
        <a href="#">Report Found</a>
      </div>
    </div>

    <div class="messages-dropdown">
      <button class="messages-btn">Messages <i class="fa fa-caret-down"></i></button>
      <div class="messages-content">
        <a href="#">New</a>
        <a href="#">Sent</a>
        <a href="#">Deleted</a>
      </div>
    </div>

    <div class="settings-dropdown">
      <button class="settings-btn">Settings <i class="fa fa-caret-down"></i></button>
      <div class="settings-content">
        <a href="#">Change Password</a>
      </div>
    </div>
    <a href="index.html" class="logout-btn">Logout</a>
  </div>



  <script type="text/javascript">
    var nav = document.getElementsByClassName("navbar");

    window.onscroll = function sticky() {
      if (window.pageYOffset > nav[0].offsetTop) {
        nav[0].classList.add("nav");
      } else {
        nav[0].classList.remove("nav");
      }
    }
  </script>


  <p> mumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo
    jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo
    jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo
    jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo
    jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo
    jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo
    jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo
    jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo
    jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo
    jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo
    jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo
    jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo
    jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo
    jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo
    jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbombo
    jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo
    jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo
    jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo
    jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbombo jumbomumbo jumbomumbo
    jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo
    jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo
    jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo
    jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbombo jumbomumbo jumbomumbo jumbomumbo jumbomumbo
    jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo
    jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo
    jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo
    jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbo
  </p>


</body>

</html>

所以我想要的是让粘性导航栏下拉项目在所有浏览器中都像 Chrome 中已经发生的那样工作。在页面顶部，我可以看到所有下拉选项，当我向下滚动页面时，我还可以看到所有下拉选项。

Answer 1

当您在 Safari 中打开页面时，当您向下滚动时，此导航栏是否保持固定在顶部？ 如果没有，请尝试在您设置导航的位置添加-webkit-transform: translateZ(0);position: fixed;