javascript - iPadでドロップダウンメニューが機能しない

Question

ナビゲーション メニューに問題があります。これは基本的に、ホバーするとサブメニューが下にスライドし、ホバーしていないときに上にスライドするロゴ画像です。デスクトップでは問題なく動作しますが、モバイル デバイスで問題が発生しています。特にiPad。何らかの理由で、iPhone では問題なく翻訳されているように見えますが、iPad では最初に画像をクリックすると、ドロップダウン メニューが下にスライドしてからすぐに上にスライドし、再び表示されなくなります。私は解決策をネットで検索しており、代わりにクリックを使用するようにメニューを完全に書き直そうとしましたが、iPadではまだ正しく動作していません. 誰かが私を助けてくれたり、正しい方向に向けてくれたりしたら、本当に感謝します!!

また、コードのセクションをjsフィドルに入れました

<div id="button">
<ul class="hover">
    <li class="hoverli">
        <img src="assets/images/menu_logo.jpg" width="210" height="160" class="menu_class"/>
        <ul class="file_menu">
            <li><a href="ourwork.html">our work</a>
            </li>
            <li><a href="about/about.html">about</a>
            </li>
            <li><a href="contact.html">contact</a>
            </li>
            <li class="#"><a href="#">blog</a>
            </li>
          </ul>
    </li>
</ul>

$(document).ready(function () {
$(".hoverli").hover(

function () {
    $('ul.file_menu').slideDown('medium');
},

function () {
    $('ul.file_menu').slideUp('medium');
});

$(".file_menu li").hover(

function () {
    $(this).children("ul").slideDown('medium');
},

function () {
    $(this).children("ul").slideUp('medium');
});
});

CSS

#newmenu {
position: absolute;
height: 32px;
width: 184px;
left: 35px;
top: 100px;
margin: auto;
}
ul, li {
margin:0;
padding:0;
list-style:none;
}
#submenu {
display:none;
width:100px;
position: relative;
left: 110px;
font-family: helvetica;
font-size:12px;
}
#submenu li {
background-color: #FFFFFF;
position: relative;
}
#submenu li a {
color:#00000;
text-decoration:none;
padding:5px;
display:block;
text-align: right;
padding-right: 13px
}
.file_menu li a:hover {
color: #585858;
}
.blog {
padding-bottom: 10px;
}