Javascript 如何解决多级侧导航菜单鼠标悬停问题？

当我试图展开菜单时，它会跳转到左右部分。我在下面添加了我的javascript代码HTML和CSS供您参考，希望您能从下面的代码中找到我的问题。请确保在展开我的菜单后使用鼠标悬停，这样只有你才能找到我面临的问题

[URL of issue][1]    

这个问题主要是我在展开时面临的，我如何才能制作一个弹出菜单而不是这个下拉菜单

附件是我对ref弹出式菜单的概念截图。这是我正在查看的弹出式菜单的截图，

由于

悬停

侦听器，菜单“向左和向右跳转”。您只需添加一个保持菜单状态的变量（

true

表示菜单已经打开），当调用该变量时，监听器在

hover

上运行，您可以检查该变量的值，并且仅当该变量为

false

时才在回调中执行操作

var alreadyOpen = false

$('.nav-toggle').click(function(e) {
  e.preventDefault();
    alreadyOpen = !alreadyOpen;
  $("html").toggleClass("openNav");
  $(".nav-toggle").toggleClass("active");

});

$('.menu').hover(function(){
    if (!alreadyOpen) {
        $("html").toggleClass("openNav");
        $(".nav-toggle").toggleClass("active");
    }
})

---

对不起，我不知道为什么我的URL没有显示在我的评论中。你可以在这里找到问题的URL。谢谢你的解决方案。它对我有效。。。。。。。。。。。。。