androidでドロップダウンメニューが選択できるようにしたい。

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
HTML5とCSSでwebsiteを作っていますが、headerに配置しているドロップダウンの挙動に関して問題が生じます。

よろしくお願いいたします。

■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

「親メニュー」をPCでマウスオーバー、iPhoneでタップすると、その下に「子メニュー」が出て「子メニュー」のリンク先に飛びますが、androidですと、
「親メニュー」をタップした瞬間、「親メニュー」に設定されているリンク先に飛んでしまい、「子メニュー」を選択できません（「子メニュー」は一瞬だけ表示されます）。
iPhoneではタップを離しても、「子メニュー」は表示されています。

ドロップダウンはCSSとJqueryで組んでいます。

該当のソースコード


＜HTML＞
 <nav class="g-nav">
                        <ul>
                          <li class="g-nav01"><a href="index.html" id="current">メニュー１</a></li>
                          <li class="g-nav02"><a href="#.html" id="">メニュー2</a>
                            <ul class="child">
                              <li><a href="#.html">メニュー2-1</a></li>
                              <li><a href="#.html">メニュー2-2</a></li>
                              <li><a href="#.html">メニュー2-3</a></li>
                            </ul>
                          </li>
                          <li class="g-nav03"><a href="#.html" id="">メニュー3</a>
                            <ul class="child">
                              <li><a href="#.html">メニュー3-1</a></li>
                              <li><a href="#.html">メニュー3-2</a></li>
                              <li><a href="#.html">メニュー3-3</a></li>
                            </ul>
                          </li>
                        </ul>
                      </nav>



＜CSS＞
.g-nav {
  position: relative;
  z-index: 11;
  float: left;
  width: 650px;
  font-size: 15px;
  letter-spacing: 0.05em;
}
.g-nav li {
  float: left;
  position: relative;
  width: 130px;
  height: 140px;
  text-align: center;
}
.g-nav li a {
  display: block;
  width: 130px;
  height: 45px;
  padding: 95px 0 0 0;
  color: #000;
}
.g-nav a:hover {
  color: #666;
}
.g-nav ul.child {
  display: none;
  position: absolute;
  top: 140px;
  left: -53px;
  width: 232px;
}
.g-nav ul.child li {
  float: left;
  width: 232px;
  height: 50px;
}
.g-nav ul.child li a {
  display: block;
  width: 212px;
  height: 49px;
  margin: 0 10px 0 10px;
  padding-top: 0;
  border-bottom: 1px dotted #fff;
  color: #fff;
  font-size: 13px;
  line-height: 49px;

}
.g-nav ul.child li a:hover {
  background: url("../images/arrow02.png") no-repeat 3px 20px;
  color: #eee;
  text-indent: 1.5em;
}


＜JS＞
$(function(){
    $('.g-nav li').hover(function(){
        $("ul:not(:animated)", this).slideDown(200);
    }, function(){
        $("ul.child",this).slideUp(200);
    });
});