导航栏上的下拉菜单不适用于Safari，但适用于Chrome

Question

Basically my navbar works as intended in Chrome, but when swapped over to another browser(in this case Safari) it doesn't work. Only when at the top of the page. When scrolled down it doesn't show the dropdown options.

Initially I had an issue where the dropdown menu wouldn't work properly when scrolled down(sticky navbar) but that has since been fixed, in Chrome anyways. I know it's probably an issue with missing tags like "-webkit-" or "-moz-" for different browsers, i'm just unsure where I should add them.

 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> 

So what I want, is for the sticky navbar dropdown items to work the same in all browsers like what's already happening in Chrome. While on top of the page I can see all dropdown options, and when I scroll down the page, I can also see all dropdown options.

Answer 1

When you open your page in Safari does this navbar remains fixed at top when you scroll down? If not, try to add -webkit-transform: translateZ(0); where you are setting you nav as position: fixed;