Javascript 带下拉菜单的导航非常容易出错

我正在一个网站上学习更多关于javascript的知识，但我不知道如何解决这个问题。如果你看着小提琴，试着用你自己的导航，你就会知道我在说什么。如果不是，试着把鼠标悬停在倍增器上，然后试着点击四倍。 还有.slideUp似乎有问题，我不知道为什么。我想让它看起来像是从导航上滑下来，再滑回到导航上

那么，您将如何解决这两个问题？

//下拉菜单 $.shopDrop.hide； $.shop ul li.hover函数{ $this.find.shopDrop.stoptrue.slideDown； }，功能{ $this.find.shopDrop.stoptrue.slideUp； }; //下拉菜单信息 $.shopDrop a.hover函数{ //$this.stoptrue，true； $this.next.stoptrue.fadeInslow； }，功能{ //$this.stoptrue； $this.next.stoptrue.fadeOutslow； }; 导航商店{ 宽度：100%； 高度：100px； 背景：182024； 保证金：0； } 导航商店{ 宽度：960px； 列表样式类型：无； 保证金：0自动； 填充：0； } 导航商店{ 显示：内联块； 垂直对齐：顶部； 左侧填充：25px； } 导航车间ul li h1{ 字体大小：35px； 右边距：20px； } 导航车间ul li h2{ 颜色：fff； 文字装饰：无； 字体大小：35px； 左边距：10px； } 导航商店ul li a{ 颜色：fff； 文字装饰：无； 字体大小：35px； 垫底：10px； 填充顶部：10px； 显示：块； } .店内购物{ 位置：绝对位置； 背景：182024； 填充：30px 10px 0 10px； 利润上限：-30px； 边框右下半径：10px； 边框左下半径：10px； } nav.shop ul li div a{字体大小：20px；} nav.shop ul li div span{字体大小：15px；} shopMultiplier{边框底部：5px实心CA2525；} shopAutoclicker{边框底部：5px实心2596CA；} shopFarms{边框底部：5px实心CAB125；} shopSkills{边框底部：5px实心35CA25；} .购物信息{ 显示：无； 宽度：150px； 背景：1C262A； 文本对齐：居中； 填充：0； 颜色：fff； } .shopphoverinfo h3{ 字号：17px； 背景：CA2525； 保证金：0； 填充物：5px； 边框右上角半径：10px； 边框左上半径：10px； } .shopphoverinfo h4{ 字号：17px； 保证金：0； 背景：EED634； } .购物信息{ 字体大小：15px； } 商店 双重知识 价格：知识 单击可获得2倍的知识

三重知识 价格：知识 单击可获得3倍的知识

四倍知识 价格：知识 单击可获得4x知识

头脑简单 简单的头脑每秒培养1种知识

聪明的头脑 聪明的头脑每秒培养2种知识

->

---

问题是当淡出结束时，元素在页面上向上移动。删除淡出修复了问题，但保留了打开的元素。简单地让元素在点击时展开/关闭，而不是褪色的悬停，怎么样？我同意@obsidiange大多数现代布局不建议使用悬停导航菜单，因为这种类型的菜单不适合移动/平板设备。

// Drop down menu
$(".shopDrop").hide();

$(".shop ul li").hover(function(){
    $(this).find(".shopDrop").slideDown();
}, function(){
    $(this).find(".shopDrop").slideUp();
});

// Drop down menu info
$(".shopDrop a").hover(function(){
  $(this).next(".shopHoverInfo").fadeIn("slow");
}, function(){
  $(this).next(".shopHoverInfo").fadeOut("slow");
});