ページ内リンクがあるドロップダウンメニューの挙動について

Question

前提・実現したいこと

[前提]
1ページサイトのグローバルメニューに、
マウスオーバーで展開するドロップダウンメニューを設置しました。
そしてグローバルメニューや、展開したメニューからクリックするとページ内リンクへ飛びます。
[問題]
ただ一度クリックすると、ドロップダウンメニューが表示されません。
再度いずれかのメニューをクリックすると、表示されるようになります。

[実現したいこと]
再度クリックしなくても、マウスオーバーすると常にドロップダウンメニューが表示されるようにしたいです。

該当のソースコード

    <nav class="globalNav">

　　<div class="drawer"><!-- スマホ用メニュー -->
      <div class="navbar_toggle">
       <span class="navbar_toggle_icon"></span>
       <span class="navbar_toggle_icon"></span>
       <span class="navbar_toggle_icon"></span>
      </div>
     </div>

     <div class="menu">
      <ul class="nav">
       <li><a href="#link01">メニュー01</a></li>
       <li><a href="#link02">メニュー02</a></li>
       <li><a href="#link03">メニュー03</a></li>
       <li><a href="#link04">メニュー04</a>
           <ul class="dropMenu">
           <li><a href="#mealsLink01">ドロップメニュー01</a></li>
           <li><a href="#mealsLink02">ドロップメニュー02</a></li>
           <li><a href="#mealsLink03">ドロップメニュー03</a></li>
           </ul>
       </li>
       <li><a href="#link05">メニュー05</a></li>
      </ul>
     </div>
    </nav>

.nav{
 height: 40px;
 display: flex;
 flex-wrap: wrap;
 justify-content:space-around;
 align-items: center;
 
 li{
 padding: 0 1em;
 border-bottom: none;
 width: 100px;
 position: relative;

 a {
 text-decoration: none;
 color: #333;
 display: inline;
 box-sizing: border-box;

 &:hover {
 color: #ff0;
 }
 }


ul.dropMenu {
 display: none;
 position: absolute;
 background: #fff;
 padding: 0;
 li {
width: 200px;
border-bottom: 1px solid #000;
background: #fff;
a {
display: block;
padding: 10px;
background: #fff;
}
}
}

$(function(){
    $('.nav li').hover(function(){
        $("ul:not(:animated)", this).slideDown();
    }, function(){
        $("ul.dropMenu",this).slideUp();
    });
});

試したこと

jsの記述で解消されるかと思いますが、js自体詳しくないので質問しました。
chromeのDevtoolsでみるところ、display:block;は効いてるみたいです。

色々確認してると、レスポンシブでグローバルメニューを格納してるjavascriptと競合してる可能性が強まりました。

$(function() {
 $('.navbar_toggle').on('click', function () {
  $(this).toggleClass('open');
  $('.menu').toggleClass('open');
 });
 
 $('.menu a').on('click', function() {
  $('.menu').toggleClass('open');
	$('.navbar_toggle').toggleClass('open');
});
});

補足情報（FW/ツールのバージョンなど）

html5
jquery-migrate-3.0.0.min.jsを使用しています

Answer 1

なんとか解決できました。
結局、競合しているjsはスマホでしか使用してないので
スマホで閲覧した時だけJavaScriptを一部無効化したり有効化したりする
上記のサイトを参考に

if(navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)){
//ここに書いた処理はスマホ閲覧時のみ有効となる
$(function() {
 $('.navbar_toggle').on('click', function () {
  $(this).toggleClass('open');
  $('.menu').toggleClass('open');
 });
 $('.menu a').on('click', function() {
  $('.menu').toggleClass('open');
	$('.navbar_toggle').toggleClass('open');
});
});
}

と修正しました。

一応解決しましたが、
PCのブラウザを縮めて、スマホサイズにしたところトグルメニューは反応しなかったです。
スマホでの確認は正常に動きました。

もう少し、サイズでの振り分けが出来るjsなど、また試していこうと思います。