Javascript 如何使下拉列表正确显示？

我不知道有多少代码需要向您展示，但我真的不知道如何解决我的问题，所以我将列出所有代码。我有一个下拉菜单，我的手机版的网站，这几乎是完整的。这是我打开菜单（menu div）时的样子：

我现在的问题是子菜单。当我点击它们时，我会看到类似这样的内容（li ul顶部的空白区域和覆盖的下一个菜单项）：

ul{
宽度：100%；
位置：绝对位置；
top:51px；
左：0！重要；
z指数：100；
}
李乌尔{
显示：块；
宽度：100%；
位置：相对位置；
}
li ul li{}li{
宽度：33%；
浮动：左；
列表样式：无；
左侧填充：0；
}
李：最后一个孩子{
边界权：无；
}
李阿{
显示：块；
背景：#879270；
填充：4%10%；
字号：1.35em；
文字装饰：无；
列表样式：无；
文本对齐：左对齐；
颜色：#000000！重要；
}
@媒体屏幕和屏幕（最小宽度：768px）{
#菜单{
显示：无；
}
}
@媒体屏幕和屏幕（最大宽度：768px）{
#菜单{
宽度：1.4em；
显示：块；
背景：#879270；
字号：1.35em；
文本对齐：居中；
位置：绝对位置；
z指数：1000；
顶部：15px；
右：10px；
边界半径：3px；
边框：1px实心#000000；
垫面：5px；
}
#nav.js{
显示：无；
}
保险商实验室{
宽度：100%；
}
李{
宽度：100%；
边界权：无；
}
}
下拉列表{
显示：无；
}

您在

ul

上有一个

top

值（

top:51px；

），该值将继承到您的子菜单中。添加

top:0到
li ul
，这样子菜单上就不会显示它


ul{
宽度：100%；
位置：绝对位置；
top:51px；
左：0！重要；
z指数：100；
}
李乌尔{
显示：块；
宽度：100%；
位置：相对位置；
排名：0；
}
li ul li{}
李{
宽度：33%；
浮动：左；
列表样式：无；
左侧填充：0；
}
李：最后一个孩子{
边界权：无；
}
李阿{
显示：块；
背景：#879270；
填充：4%10%；
字号：1.35em；
文字装饰：无；
列表样式：无；
文本对齐：左对齐；
颜色：#000000！重要；
}
@媒体屏幕和屏幕（最小宽度：768px）{
#菜单{
显示：无；
}
}
@媒体屏幕和屏幕（最大宽度：768px）{
#菜单{
宽度：1.4em；
显示：块；
背景：#879270；
字号：1.35em；
文本对齐：居中；
位置：绝对位置；
z指数：1000；
顶部：15px；
右：10px；
边界半径：3px；
边框：1px实心#000000；
垫面：5px；
}
#nav.js{
显示：无；
}
保险商实验室{
宽度：100%；
}
李{
宽度：100%；
边界权：无；
}
}
下拉列表{
显示：无；
}











$（“#nav”）.addClass（“js”）。在（“☰；”）之前；
$（“#菜单”）。单击（函数（）{
$（“#导航”）.toggle（）；
});
$（窗口）。调整大小（函数（）{
如果（window.innerWidth>768）{
$（“#nav”）.removeAttr（“样式”）；
}
});
$（'li.dropdown'）。单击（函数（）{
$（'li.dropdown'）.not（this.find（'ul'）.hide（）；
$（this.find（'ul'）.toggle（）；
});
OMG，我知道这将是一件非常简单的事情。我怎么会忽视这一点？？我想这意味着我需要离开电脑一段时间。哈哈。非常感谢你！！！我遇到了另一个小问题。当我尝试单击其中一个子菜单项时，它会关闭我的子菜单-你是否也知道如何修复它？？
Home
About
Contact

Home
                        <---empty space
  My dropdown li
  My dropdown li 2
  My dropdown li 3
Contact