下拉列表无法正常工作

Question

大家好，我最近写了一个网页（骨架）但是我坚持小问题，我的按钮菜单在safari中无法正常工作（我使用bootstrap所以当宽度小于768px时出现按钮），因此，当我点击一个按钮时，没有出现任何内容，但只要我将鼠标移出网页菜单就会出现。 按钮必须在整个页面上下拉菜单（它在Google Chrome和Firefox中完美运行）

的JavaScript

function drop(){
    document.getElementById("myDrop").classList.toggle("show");
    document.getElementById("head1").classList.toggle("disableHeaderAndSection");
    document.getElementById("section1").classList.toggle("disableHeaderAndSection");
}

CSS

.drop-content{
    position:fixed;
    bottom:0;
    top:50px;
    right:0;
    left:0;
    display:none;   
    background:white;
    border: 1px solid gray;
    padding:20px;
        border-radius:10px;}
.show {
    display:block;


}

HTML

<div id="outdrop">

                    <div class="drop-content" id="myDrop">
                        <h3>Menu</h3>
                        <p>menu part 1</p>
                        <p>menu part 2</p>
                        <p>menu part 3</p>
                    </div>
                </div> 

请帮我解决这个问题（我已将我的骨架放在免费托管中）页面 - bloggd.rf.gd