iOSの、hover付いてると2回タップ必須なバグについて

こういうの↓があったとしたら…。

<style type="text/css">
.menu{
    width:200px;
    text-align:center;
    background:#f7f7f;
}
.menu::hover{
    background:#e5e5e5;
}
</style>

<ul class="menu">
    <li>
        説明や<img>とかいれつつ
        <a href="link.html">リンク</a>
    </li>
</ul>

理想：リンクを[タップ]する　→　hoverが適用され背景色が変わり、リンク先にとぶ
現実：リンクを[タップ]する　→　hoverが適用され背景色が変わる　→　もう一回リンクを[タップ]する　→　リンク先にとぶ

ってなることを言っています。
設定されているイベント的には「二つ」なんだから2回タップ、っていう理屈もわからんでもないです。
だたこれってiOS8系で発生してたバグで、iOS9ではちゃんと潰されています。

が、hoverにhoverを重ねてリンクさせるデザイン案件がありまして同様の問題が起こりました。
iOSは最新の9.3.1です。
Androidは平気なのになー……Safariはイベントに対する解釈がかなり違うのかな。

理想：リンクを[タップ]する　→　隠れていたBOXがでてくる　→　BOX内のリンクを[タップ]する　→　hoverが適用され背景色が変わり、リンク先にとぶ
現実：リンクを[タップ]する　→　隠れていたBOXがでてくる　→　BOX内のリンクを[タップ]する　→　hoverが適用され背景色が変わる　→　もう一回リンクを[タップ]する　→　リンク先にとぶ

どうにかしなくてはいけないと、どうにかしたのが下記scriptです。
htmlは省略。上記htmlのliに、ulネストしてリンクが入ってると思ってください。

//まずはユーザーエージェント確認
var _ua = (function(u){
  return {
    Tablet:(u.indexOf("windows") != -1 && u.indexOf("touch") != -1)
    || u.indexOf("ipad") != -1
    || (u.indexOf("android") != -1 && u.indexOf("mobile") == -1)
    || (u.indexOf("firefox") != -1 && u.indexOf("tablet") != -1)
    || u.indexOf("kindle") != -1
    || u.indexOf("silk") != -1
    || u.indexOf("playbook") != -1,
    Mobile:(u.indexOf("windows") != -1 && u.indexOf("phone") != -1)
    || u.indexOf("iphone") != -1
    || u.indexOf("ipod") != -1
    || (u.indexOf("android") != -1 && u.indexOf("mobile") != -1)
    || (u.indexOf("firefox") != -1 && u.indexOf("mobile") != -1)
    || u.indexOf("blackberry") != -1
  }
})(window.navigator.userAgent.toLowerCase());

//PC以外なら
if(_ua.Tablet || _ua.Mobile){ 
        $(".menu li li").on('mouseover',function(){
          window.location=$(this).find("a").attr("href");
        });
}

最初は厳密にtouchイベントを書いてみようとしてたんですが、試しに入れてみたmouseoverが鍵でした。※tapではアウト。
hoverも適用されるし、ページ読み込み中のプログレスバーもきちんと見える。
一先ず解決です。