導航欄上的下拉菜單不適用於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;