Javascript 暂停悬停菜单

我怎样才能重现

在“每个视觉的程序”一节中，有一个菜单在悬停时具有保持/暂停效果，因此您可以悬停在任何元素上，并在子菜单中导航而不会出现问题

到目前为止，我得到的是：

.links destacados{
填充：0px；
溢出：隐藏；
}
.links destacados h2{
边际上限：0px；
字体大小：34px；
线高：38px；
颜色：#000b3d；
宽度：312px；
显示：内联块；
垂直对齐：顶部；
左侧填充：0；
右边填充：28px；
字母间距：-.5px
}
.links destacados h2 p{
字体大小：继承；
行高：继承；
颜色：#000b3d
}
.links destacados.wrapper链接{
显示：内联块；
垂直对齐：顶部；
宽度：钙（100%-376px）；
职位：相对
}
.links destacados.wrapper links.list first level>div>li{
宽度：54.44%；
右键：40px
}
.links destacados.wrapper links.list first level>div>li a{
字体大小：20px；
线高：26px；
文字装饰：无；
显示：块；
填充：10px0；
边框底部：1px实心#a8a7a7；
颜色：#000b3d；
宽度：100%
}
.links destacados.wrapper links.list第一级>div>li.active>ul{
显示：块；
位置：绝对位置；
顶部：2个；
左：54.44%；
左侧填充：14px；
边缘底部：40px；
宽度：55.55%；
}
.links destacados.wrapper links.list first level>div>li>ul{
显示：无
}
.links destacados.wrapper链接。列出第一级>div>li>ul li a{
字体大小：16px；
线高：24px
}
.links destacados.wrapper links.list first level>div>li.active>a，
.links destacados.wrapper links.list first level>div>li a:hover{
颜色：#f2151e；
边框颜色：#f2151e；
职位：相对
}
.links destacados.wrapper links.list first level>div>li.active>a:after，
.links destacados.wrapper links.list first level>div>li>a:hover:after{
内容：'\f054'；
字体系列：'font Awesome 5 Pro'；
字体大小：22px；
颜色：#f2151e；
位置：绝对位置；
右：0；
顶部：计算（50%-10px）
}
@媒体屏幕和屏幕（最大宽度：992px）{
.links destacados.wrapper links.list first level>div>li a{
字号：18px；
线高：23px
}
.links destacados.wrapper链接。列出第一级>div>li>ul li a{
字体大小：14px；
线高：18px
}
}
@媒体屏幕和屏幕（最大宽度：770px）{
.links destacados h2{
边际上限：0；
填充：0
}
.links destacados.wrapper链接{
身高：继承！重要；
填充：0
}
.links destacados.wrapper links.list first level>div>li{
宽度：100%；
右边填充：0；
边框底部：1px实心#D3
}
.links destacados.wrapper links.list第一级>div>li.active>ul{
显示：无
}
.links destacados.wrapper links.list第一级>div>li.ico箭头{
内容：“；
显示：内联块；
背景：url（../../images/flecha\u down\u grey.png）无重复中心；
宽度：40px；
高度：40px；
垂直对齐：中间对齐
}
.links destacados.wrapper links.list first level>div>li.open.ico箭头{
背景：url（../../images/flecha\u up\u grey.png）无重复中心
}
.links destacados.wrapper links.list first level>div>li>a{
宽度：计算（100%-45px）；
显示：内联块；
垂直对齐：中间对齐；
边界：0
}
.links destacados.wrapper links.list first level>div>li.active>a:after，
.links destacados.wrapper links.list first level>div>li>a:hover:after{
内容：无
}
.links destacados.wrapper links.list first level>div>li>ul，
.links destacados.wrapper links.list第一级>div>li.active>ul{
职位：继承；
顶部：继承；
左：继承；
宽度：100%；
右边填充：0；
页边距底部：0；
左侧填充：0
}
.links destacados.wrapper links.列表第一级>div>li>ula{
边界：0；
边框顶部：1px实心#D3；
填充：10px 25px
}
}
.front.links destacados.wrapper links.list第一级>div>li.active>ul{
列表样式：无；
}
.links destacados ul li{
列表样式：无；
}

泰特拉科涅斯药力




















































$（“li#elm”）。悬停(
函数（）{
$（“li#elm”）.removeClass（'active'）；
$（this.addClass（'active'）；
}
);

我没有查看您的代码，但我认为它是一种标准用法

有必要在左列中列出第一级菜单。 右栏包含单独的第二级

我会使用

.links-destacados .wrapper-links .list-first-level > div > li.active > ul {
    display: block;
    position: absolute;
    top: 2px;
    left: 44.44%;
    padding-left: 14px;
    margin-bottom: 40px;
    width: 55.55%;
}