hoverした状態でページをリロードすると意図した動作と逆になる＆バブリング？してしまう

970px以下で動作するメガメニューを作りたいのですが、困っていることが２つあります。
（ブラウザはChromeとEdgeとFireFoxを使って確認しました。２つの困りごとどちらともFireFoxのみ下記のようになってしまいます。）
分かりにくい説明で申し訳ありませんが、教えていただけるとありがたいです。
よろしくお願いします<(_ _)>

【困りごと１】

li#megabtn にカーソルが乗った状態でページをリロードすると、「li#megabtn からカーソルが離れたときに #megabtnに .is-active がついて、li#megabtn にカーソルが乗った時に #megabtnの .is-active が消える」という風になってしまいます。
ページをリロードした時に li#megabtn にカーソルがある場合でも、#megabtnに .is-activeをすぐにつけるにはどうしたら良いでしょうか。。

【困りごと２】

上記のように、li#megabtn にカーソルが乗った状態でページをリロードすると、「li#megabtn から下にカーソルを動かしたときに#megabtnの .is-activeが付いたり消えたり」してしまいます。
（バブリングというのでしょうか？stoppropagationを使ってみたりしたのですが、解決できませんでした。）

HTML

<ul id="menu-test" class="nav navbar-nav dropdown"> <li id="megabtn" class="start"> <a class="dropdown-toggle hover-btn sp-hide" href="products/"> 商品情報<b class="caret"></b> </a> <div class="megamenu"> <div class="container megawrapper"> <p class="topcategory">商品情報</p> <dl class="megamenu-inner"> <dt>商品カテゴリ１</dt> <dd> <ul> <li><a href="products/01/"><img class="res" src="/images/products01.png" alt="商品１"><span>商品１</span></a></li> <li><a href="products/02/"><img class="res" src="/images/products02.png" alt="商品２"><span>商品２</span></a></li> <li><a href="products/03/"><img class="res" src="/images/products03" alt="商品３"><span>商品３</span></a></li> </ul> </dd> </dl> <ul class="bottom-menu"> <li><a href="product/">商品一覧へ</a></li> <li><a href="products/">商品詳細へ</a></li> </ul> </div> </div> </li> <li id="dropdown2"> <a class="dropdown-toggle" href="menu2/"> メニュー２<b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="link1/">リンク１</a></li> <li><a href="link2">リンク２</a></li> <li><a href="link3">リンク３</a></li> </ul> </li> </ul>

JavaScript

<script>$(window).resize(function(){ $(function(){ var w = $(window).width(); var x = 970; if(w >= x) { $(function () { $('#megabtn').hover(function(){ $('#megabtn').toggleClass('is-active'); });}),$(function () { $('#dropdown2').hover(function(){ $('#dropdown2').toggleClass('open'); });}) }}); }); </script>

CSS

div.megamenu { display: none; overflow: auto; position: absolute; top: 50px; left: 0; max-height: calc(100vh - 50px); padding: 1.5em 0 3em; z-index: 100; width: 1180px; margin-top:0!important;} #megabtn.is-active div.megamenu { display: block; animation: show .5s ease 0s forwards; -webkit-animation: show .5s ease 0s forwards;}