Javascript CSS菜单，当内容较长时，下拉菜单在桌面视图上不起作用

我试着把这两个导航条和粘性响应结合起来

这个想法是与

到目前为止，它运行良好，请参见下面的示例

函数myFunction2（）{
var x=document.getElementById（“myTopnav”）；
如果（x.className==“topnav”）{
x、 类名+=“响应”；
}否则{
x、 className=“topnav”；
}
}
window.onscroll=function（）{myFunction（）}；
var navbar=document.getElementById（“navbar”）；
var sticky=navbar.offsetTop；
函数myFunction（）{
如果（window.pageYOffset>=粘性）{
navbar.classList.add（“粘性”）
}否则{
navbar.classList.remove（“粘性”）；
}
}

#navbar.topnav{
溢出：隐藏；
背景色：#333；
}
#导航栏。顶导航a{
浮动：左；
显示：块；
颜色：#F2F2；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
字号：17px；
}
.主动{
背景色：#4CAF50；
颜色：白色；
}
#导航栏.顶导航.图标{
显示：无；
}
.下拉列表{
浮动：左；
溢出：隐藏；
}
.下拉菜单{
字号：17px；
边界：无；
大纲：无；
颜色：白色；
填充：14px 16px；
背景色：继承；
字体家族：继承；
保证金：0；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.下拉内容a{
浮动：无；
颜色：黑色！重要；
填充：12px 16px；
文字装饰：无；
显示：块；
文本对齐：左对齐；
}
#导航栏.topnav a:悬停，.dropdown:悬停.dropbtn{
背景色：#555；
颜色：白色；
}
.下拉列表内容a：悬停{
背景色：#ddd；
颜色：黑色；
}
.下拉：悬停.下拉内容{
显示：块；
}
@媒体屏幕和屏幕（最大宽度：600px）{
#导航栏.topnav a:不是（：第一个孩子），.dropdown.dropbtn{
显示：无；
}
#导航栏。topnav a.图标{
浮动：对；
显示：块；
}
}
@媒体屏幕和屏幕（最大宽度：600px）{
#navbar.topnav.responsive{position:relative；}
#导航栏.topnav.responsive.icon{
位置：绝对位置；
右：0；
排名：0；
}
#导航条。顶导航{
浮动：无；
显示：块；
文本对齐：左对齐；
}
#navbar.topnav.responsive.dropdown{float:none；}
#navbar.topnav.responsive.dropdown内容{position:relative；}
#导航栏.topnav.responsive.dropdown.dropbtn{
显示：块；
宽度：100%；
文本对齐：左对齐；
}
}
.标题{
背景色：#f1f1；
填充：30px；
文本对齐：居中；
}
#导航栏{
溢出：隐藏；
背景色：#333；
}
#导航栏a{
浮动：左；
显示：块；
颜色：#F2F2；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
字号：17px；
}
#导航栏a：悬停{
背景色：#ddd；
颜色：黑色；
}
#导航条a.激活{
背景色：#4CAF50；
颜色：白色；
}
.内容{
填充：16px；
}
.粘的{
位置：固定；
排名：0；
宽度：100%；
}
.粘性+.内容{
填充顶部：60px；
}

向下滚动
向下滚动以查看粘性效果

下拉列表
粘性导航示例
当您到达滚动位置时，导航栏将粘在顶部

一些文本以启用滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。对共和国实验室的影响，以及对其无胎动的初步疗效

一些文本以启用滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。对共和国实验室的影响，以及对其无胎动的初步疗效

一些文本以启用滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。对共和国实验室的影响，以及对其无胎动的初步疗效

一些文本以启用滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。对共和国实验室的影响，以及对其无胎动的初步疗效

一些文本以启用滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。对共和国实验室的影响，以及对其无胎动的初步疗效

一些文本以启用滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。对共和国实验室的影响，以及对其无胎动的初步疗效

一些文本以启用滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。对共和国实验室的影响，以及对其无胎动的初步疗效

一些文本以启用滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。对共和国实验室的影响，以及对其无胎动的初步疗效

一些文本以启用滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。荣誉事业一号
dropdown-content : relative;

#navbar {
 overflow: hidden; /* remove this line & that's it, problem solved, see the example below */
 background-color: #333;
}