Javascript 下拉菜单未正确打开和关闭

当我将鼠标悬停在导航链接上时，我已经让它打开和关闭，但是我如何保持它打开，以便访问菜单上的内容？我需要它的工作方式，正是一个下拉菜单的工作

这就是我到目前为止所做的，我还需要html布局保持不变

$（'.nav link--dropdown'）.mouseover（函数（）{
$（'.dropdown menu'）.css（'display'，'block'）；
});
$（'.nav link--dropdown'）.mouseleave（函数（）{
$（'.dropdown menu'）.css（'display'，'none'）；
});
ul{
列表样式：无；
填充：0px；
显示器：flex；
}
李{
右边距：10px；
}
.下拉菜单{
显示：无；
}
.下拉菜单{
显示：块；
背景颜色：灰色；
颜色：白色；
填充：10px；
文本对齐：居中；
宽度：200px；
}


主页
下拉列表


随机文本
随机文本
随机文本

这里的问题是，当您移动到下拉菜单时，您离开了导航链接-下拉菜单。简单的解决方案是：在导航项中包含下拉菜单


$（'.nav link--dropdown'）.mouseover（函数（）{
$（'.dropdown menu'）.css（'display'，'block'）；
});
$（'.nav link--dropdown'）.mouseleave（函数（）{
$（'.dropdown menu'）.css（'display'，'none'）；
});
ul{
列表样式：无；
填充：0px；
显示器：flex；
}
李{
右边距：10px；
}
.下拉菜单{
显示：无；
}
.下拉菜单{
显示：块；
背景颜色：灰色；
颜色：白色；
填充：10px；
文本对齐：居中；
宽度：200px；
}


主页

下拉列表

随机文本
随机文本
随机文本



您可以通过将要悬停的菜单项与下拉菜单项捆绑在同一个div中来实现这一点

<div class="nav">
  <ul>
    <li class="nav-link">home</li>
    <div class="innerNav">
        <li class="nav-link--dropdown">dropdown</li>
        <div class="dropdown-menu">
            <ul>
              <li class="dropdown-menu__link">random text</li>
              <li class="dropdown-menu__link">random text</li>
              <li class="dropdown-menu__link">random text</li>
            </ul>
         </div>
     </div>
  </ul>
</div>

请参阅此JSFIDLE:
应该删除边距，如果没有，当我们进入边距区域时，将触发鼠标离开事件



$（'.nav link--dropdown'）.mouseover（函数（）{
$（'.dropdown menu'）.css（'display'，'block'）；
});
$（'.dropdown menu'）.mouseover（函数（）{
$（'.dropdown menu'）.css（'display'，'block'）；
});
$（'.nav link--dropdown'）.mouseleave（函数（）{
$（'.dropdown menu'）.css（'display'，'none'）；
});
$（'.dropdown menu'）.mouseleave（函数（）{
$（'.dropdown menu'）.css（'display'，'none'）；
});
*{
框大小：边框框；
保证金：0；
填充：0；
}
保险商实验室{
列表样式：无；
填充：0px；
显示器：flex；
}
李{
填充：10px；
}
.下拉菜单{
显示：无；
}
.下拉菜单{
显示：块；
背景颜色：灰色；
颜色：白色；
填充：10px；
文本对齐：居中；
宽度：200px；
}


主页
下拉列表


随机文本
随机文本
随机文本

由于您的问题是当您尝试将鼠标移动到下面的下拉菜单时，
mouseleave
事件将触发，如果您确实必须保持元素分离，请将下拉菜单添加到保持显示：block的类中

$('.nav-link--dropdown, .dropdown-menu').mouseover(function () {
  $('.dropdown-menu').css('display', 'block');
});

$('.nav-link--dropdown, .dropdown-menu').mouseleave(function () {
  $('.dropdown-menu').css('display', 'none');
});

并从菜单项中删除边距/填充。如果需要一些间距，请改用线宽：

.nav ul li {
  line-height: 40px;
}

ul {
  list-style: none;
  margin: 0;  // <--- I changed this from padding: 0px;
  display: flex;
}

.nav ul li{
线高：40px；
}
保险商实验室{
列表样式：无；
保证金：0//
.nav ul li {
  line-height: 40px;
}

ul {
  list-style: none;
  margin: 0;  // <--- I changed this from padding: 0px;
  display: flex;
}