html - CSS/HTML 导航菜单中的 Safari 中不显示下拉部分

Question

我有以下代码来创建一个基本的导航菜单。它在除 Safari 之外的所有浏览器中都按预期工作。在 Safari 中，下拉部分不会出现在悬停时。它们适用于 Chrome (Windows/Mac/Android)、Firefox (Windows/Mac) 和 Internet Explorer。非常感谢任何帮助。

CSS:

ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: rgba(93, 93, 93, 0.9);
    position: fixed;
    top: 0;
    width: 100%;
}

ul.topnav li {float: left;}

ul.topnav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

ul.topnav li a:hover:not(.active) {background-color: #888;}

ul.topnav li a.active {background-color: #4CAF50;}

ul.topnav li.right {float: right;}


li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li.dropdown {
    display: inline-block;
}

li.dropdown.right {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: fixed;
    background-color: rgba(93, 93, 93, 0.9);
    min-width: 221px;
    max-height: 600px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: rgba(93, 93, 93, 0.9)}

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

HTML:

<ul class='topnav'>
   <li><a href='index.php'><img class='menu' src='images/CMmenu.gif' height='19px'></a></li>
    <li class='dropdown'>
        <a href='#' class='dropbtn'>Certifications</a>
            <div class='dropdown-content'>
            <a href='index.php?id=all'>--View All Departments--</a>
            <other links here....using PHP>
            </div>
    </li>
    <li class='dropdown'>
        <a href='#' class='dropbtn'>Employees</a>
            <div class='dropdown-content'>
            <a href='view_employees.php'>View/Edit</a>
            <a href='add_employee.php'>Add</a>
            </div>
    </li>
    <li class='dropdown right'>
     <a href='#' class='dropbtn'>My Account</a>
    <div class='dropdown-content'>
    <a href='user_settings.php'>Account Settings</a>
    <a href='logout.php'>Logout</a>
  </div>
    </li>
    <li class='dropdown right'>
    <a href='#' class='active dropbtn'>Admin</a>
    <div class='dropdown-content'>
    <a href='view_cert_type.php'>View/Edit Certification Types</a>
    <a href='add_cert_type.php'>Add Certification Type</a>
    <a href='view_depts.php'>View/Edit Departments</a>
    <a href='add_dept.php'>Add Department</a>
    <a href='admin_users.php'>View/Edit Users</a>
    <a href='add_user.php'>Add User</a>
    <a href='org_settings.php'>Organization Settings</a>
      </div>
    </li>
</ul>

Answer 1

如果它对其他人有帮助，答案是从 ul.topnav 中删除我的溢出规则。