Почему в Safari отображаются только некоторые теги выпадающего меню, а все они активны?

Question

Я разработал выпадающее меню для веб-страницы. Он отображает все «dropdown-content» при нажатии на «dropbtn» во всех браузерах, кроме Safari. В Safari отображается только первый из моих тегов a, остальные также активируются, но не отображаются. HTML:

<div id="dropdownmenu">
    <div class="dropdown">
        <button class="dropbtn">Menu</button>
        <div class="dropdown-content">
            <a href="./index.htm">Home</a>
            <a href="./history.htm">History</a>
            <a href="./releases.htm">Releases</a>
            <a href="./kontakt.htm">Kontakt</a>
            <a href="../index.htm">JFBmusic</a>
        </div>
    </div>
</div>

CSS:

@media only screen and (max-width:860px) {
    #dropdownmenu {
        display:block;
    }
}

#dropdownmenu {
    display:none;
}
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-content {
    top:0;
    margin-top:50px;
    display: none;
    position: fixed;
    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;
}
.dropdown-content a:hover {
    background-color: #ddd;
}
.dropdown-content a:visited {
    color: black;
}
.dropdown:hover .dropdown-content {
    display: block;
}
.dropdown:hover .dropbtn {
    background-color: darkgrey;
}

Как решить эту проблему?