Javascript 鼠标上方的子菜单断开连接，并且无法导航到子菜单

我正在尝试创建一个子菜单，但必须将子菜单

HTML

保留在主菜单之外，并且在鼠标上方它将显示隐藏，但它没有按预期工作，我认为我没有尝试好的方法，是否有人可以查看此项并提出建议

这是你的电话号码

注释 1.问题是，当你们将鼠标移到“商店”上并试图进入子菜单时，它就隐藏了。 2.我不得不将子菜单html保留在主导航之外，因为子菜单必须是全宽的。 3.我也希望添加一些过渡效果，我知道使用显示无/块，过渡将不起作用，但有人可以建议吗

$（'.shop'）.mouseenter（函数（）{
$（'.primary subnav'）.show（）
}).mouseleave（函数（）{
$（'.primary subnav'）.hide（）
});
.nav{float:左；宽度：100%；}
primarynav先生{
列表样式：无；
保证金：0；
填充：0；
字体大小：15px；
文本对齐：右对齐；
}
.primarynav>li{
列表样式：无；
显示：内联；
}
.primarynav>li>a{
显示：内联块；
文字装饰：无；
颜色：#333；
填充：0 15px；
高度：67px；
线高：67px；
-webkit过渡：所有0.35秒都易于输入输出；
-moz转换：所有0.35秒都易于输入输出；
-o型过渡：所有0.35秒均易于输入输出；
-ms转换：所有0.35秒均易于输入输出；
}
.primarynav>li>a:悬停{
背景色：#c0e5da；
}
.primary subnav{
位置：绝对位置；
左：0；
顶部：64px；
宽度：100%；
边框顶部：2个实心#c0e5da；
背景色：rgba（255,0,0,0.9）；
最小高度：350px；
显示：无；
}








子菜单包装器
您可以将与附加到
.shop
的mouseover和mouseleave事件相同的事件处理程序附加到
.primary subnav


$（'.shop'）.mouseover（函数（）{
$（'.primary subnav'）.fadeIn（1000）；
}).mouseleave（函数（）{
$（'.primary subnav'）.hide（）；
});
$（'.primary subnav'）.mouseover（函数（）{
$（'.primary subnav'）.show（）；
}).mouseleave（函数（）{
$（'.primary subnav'）.hide（）；
});
.nav{float:左；宽度：100%；}
primarynav先生{
列表样式：无；
保证金：0；
填充：0；
字体大小：15px；
文本对齐：右对齐；
}
.primarynav>li{
列表样式：无；
显示：内联；
}
.primarynav>li>a{
显示：内联块；
文字装饰：无；
颜色：#333；
填充：0 15px；
高度：67px；
线高：67px；
-webkit过渡：所有0.35秒都易于输入输出；
-moz转换：所有0.35秒都易于输入输出；
-o型过渡：所有0.35秒均易于输入输出；
-ms转换：所有0.35秒均易于输入输出；
}
.primarynav>li>a:悬停{
背景色：#c0e5da；
}
.primary subnav{
位置：绝对位置；
左：0；
顶部：64px；
宽度：100%；
边框顶部：2个实心#c0e5da；
背景色：rgba（255,0,0,0.9）；
最小高度：350px；
显示：无；
}








子菜单包装器
“未按预期工作”，预计会发生什么？当我在商店上鼠标悬停时，我应该能够导航到子菜单div，即红色方框。当前，当您鼠标悬停并尝试进入子菜单时，它将隐藏。感谢您的快速回答，这解决了问题，当你在子菜单中时，主菜单是否仍然保持活动状态？你可以创建一个活动类，并从子菜单的鼠标悬停事件将其添加到主菜单的按钮是的，得到了，在鼠标悬停事件完成后添加类并删除类。谢谢你的回答！！