Javascript 如何消除菜单项与其下拉列表之间的间隙？

我正在使用一个CSS/HTML下拉列表，这是我在网上找到的一个起点。我正在调整它。当我将浏览器缩小（我使用的是Chrome）时，最上面一行和下拉菜单之间有一个间隙（参见屏幕截图）。需要一些关于如何消除这种差距的帮助

我用它作为参考

谢谢你的帮助

它看起来像什么：

我想要的是：

body，
分区，
h1，
h2，
h3，
h4，
h5，
h6，
P
ul，
ol,，
锂，
dl，
dt，
dd，
img，
形式，
字段集，
输入，
文本区，
大宗报价{
保证金：0；
填充：0；
边界：0；
}
身体{
背景：#909eab url（bg.png）；
字体系列：Helvetica，无衬线；
字号：18px；
线高：24px；
}
导航{
保证金：100像素自动；
文本对齐：居中；
}
导航ul{
显示：无；
}
导航ul li：悬停>ul{
显示：块；
}
导航ul{
背景：#efef；
背景：线性梯度（顶部，#EF0%，#BBBB100%）；
背景：-莫兹线性梯度（顶部，#EFEF0%，#BBBB100%）；
背景：-webkit线性梯度（顶部，#EFEF0%，#BBBB100%）；
盒子阴影：0px 0px 9px rgba（0,0,0,0.15）；
填充：0 20px；
边界半径：10px；
列表样式：无；
位置：相对位置；
显示：内联表；
}
海军ul：之后{
内容：“；
明确：两者皆有；
显示：块；
}
李国荣{
浮动：左；
}
nav ul li:悬停{
背景：#4b545f；
背景：线性梯度（顶部，#4f5964 0%，#5f6975 40%）；
背景：-moz线性梯度（顶部，#4f5964 0%，#5f6975 40%）；
背景：-webkit线性梯度（顶部，#4f5964 0%，#5f6975 40%）；
}
nav ul li:悬停a{
颜色：#fff；
}
海军ulli a{
显示：块；
填充：25px 40px；
颜色：#7575；
文字装饰：无；
}
导航ul{
背景#5f6975；
边界半径：0px；
填充：0；
位置：绝对位置；
最高：100%；
}
李国宝{
浮动：无；
边框顶部：1px实心#6b727c；
边框底部：1px实心#575f6a；
位置：相对位置；
}
海军ulli a{
填充：15px 40px；
颜色：#fff；
}
导航ulli a：悬停{
背景：#4b545f；
}
导航ul{
位置：绝对位置；
左：100%；
排名：0；
}

能否尝试在“nav ul”中添加z-index:2属性。它将使下拉列表位于导航栏的顶部。很可能您没有指定

位置

规则。在此处显示您的代码添加的CSS代码。是否也可以插入您的HTML？也添加了HTML