javascript - 下拉菜单仅适用于 Chrome

Question

我不得不将下拉菜单修改为电子商务网站中的一个元素，由于 html 结构，无法使用 css 来完成显示/隐藏。

我想出了这段代码，但它只适用于 Chrome。在 IE 和 Firefox 中，当光标离开蓝色并移至红色上方时，下拉菜单立即消失。这是为什么？我应该如何解决它？

$("#button").hover(
  function() {
    $("#mainmenu").show();
  },
  function() {
    if (!$("#mainmenu").is(":hover")) {
      $("#mainmenu").hide();
    }
  }
);

$("#mainmenu").hover(
  function() {
    
  },
  function() {
      $("#mainmenu").hide();

  }
);

#button{
  width: 300px;
  height: 30px;
  background-color: blue;
}
#mainmenu{
  width: 300px;
  height: 600px;
  background-color: red;
  position: absolute;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="button"></div>
<div id="mainmenu"></div>

Answer 1

在$("#mainmenu").hover()的第一个回调函数中添加$("#mainmenu").show();:

$("#button").hover(
  function() {
    $("#mainmenu").show();
  },
  function() {
    if (!$("#mainmenu").is(":hover")) {
      $("#mainmenu").hide();
    }
  }
);

$("#mainmenu").hover(
  function() {
    $("#mainmenu").show();
  },
  function() {
    $("#mainmenu").hide();

  }
);

#button {
  width: 300px;
  height: 30px;
  background-color: blue;
}

#mainmenu {
  width: 300px;
  height: 600px;
  background-color: red;
  position: absolute;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="button"></div>
<div id="mainmenu"></div>