Javascript 添加下拉菜单后，我的导航菜单无法正常工作

我的导航菜单有问题。我的导航菜单响应迅速，因此导航在移动版中使用navicon（汉堡包菜单）。我将一个菜单选项卡（公文包）更改为下拉菜单。当我这样做时，公文包选项卡现在不与导航菜单的其余部分内联。在移动版中，它也不在navicon菜单中。我不知道该怎么解决这个问题

函数myDropdownMenu（）{
document.getElementById（“myDropdown”）.classList.toggle（“show”）；
}
window.onclick=函数（e）{
如果（！e.target.matches（'.dropButton'））{
var myDropdown=document.getElementById（“myDropdown”）；
if（myDropdown.classList.contains（'show'））{
myDropdown.classList.remove（'show'）；
}
}
}
函数myFunction（）{
var x=document.getElementById（“myNavbar”）；
如果（x.className==“导航栏”）{
x、 类名+=“响应”；
}否则{
x、 className=“navbar”；
}
}

.navbar{
溢出：隐藏；
背景色：白色；
}
纳瓦尔先生{
浮动：左；
显示：块；
颜色：黑色；
文本对齐：居中；
填充：14px 17px；
文字装饰：无；
字体大小：20px；
字体系列：笔迹MT、笔迹Std、草书；
}
.导航栏a:悬停，
.dropdown:悬停.dropButton，
.dropButton:焦点{
颜色：#DCAE1D；
}
.下拉列表{
浮动：左；
溢出：隐藏；
}
.下拉菜单.下拉按钮{
光标：指针；
字体大小：20px；
边界：无；
背景色：继承；
字体系列：笔迹MT、笔迹Std、草书；
保证金：0；
}
.下拉内容{
显示：无；
位置：绝对位置；
最小宽度：160px；
}
.下拉内容a{
浮动：无；
填充：12px 16px；
文字装饰：无；
显示：块；
文本对齐：左对齐；
}
.表演{
显示：块；
}
.导航条img{
宽度：自动；
高度：200px；
利润上限：-80px；
}
.navbar.icon{
显示：无；
}
@媒体屏幕和屏幕（最大宽度：600px）{
.navbar a:不是（：第一个孩子）{
显示：无；
}
.导航栏a.图标{
浮动：对；
显示：块；
}
}
@媒体屏幕和屏幕（最大宽度：600px）{
.导航栏{
位置：相对位置；
}
.navbar.responsive.icon{
位置：绝对位置；
右：0；
排名：0；
}
.导航栏{
浮动：无；
显示：块；
文本对齐：左对齐；
}
}

文件夹

您在

.navbar a

上有许多样式，但您尚未应用到

.dropdown

我已编辑了您的CSS以将

。下拉列表

视为导航项：

函数myDropdownMenu（）{
document.getElementById（“myDropdown”）.classList.toggle（“show”）；
}
window.onclick=函数（e）{
如果（！e.target.matches（'.dropButton'））{
var myDropdown=document.getElementById（“myDropdown”）；
if（myDropdown.classList.contains（'show'））{
myDropdown.classList.remove（'show'）；
}
}
}
函数myFunction（）{
var x=document.getElementById（“myNavbar”）；
如果（x.className==“导航栏”）{
x、 类名+=“响应”；
}否则{
x、 className=“navbar”；
}
}

.navbar{
溢出：隐藏；
背景色：白色；
}
纳瓦尔先生{
浮动：左；
显示：块；
颜色：黑色；
文本对齐：居中；
填充：14px 17px；
文字装饰：无；
字体大小：20px；
字体系列：笔迹MT、笔迹Std、草书；
}
.导航栏a:悬停，
.dropdown:悬停.dropButton，
.dropButton:焦点{
颜色：#DCAE1D；
}
.下拉列表{
浮动：左；
溢出：隐藏；
/*加垫*/
填充：14px 17px；
}
.下拉菜单.下拉按钮{
光标：指针；
字体大小：20px；
边界：无；
背景色：继承；
字体系列：笔迹MT、笔迹Std、草书；
保证金：0；
}
.下拉内容{
显示：无；
位置：绝对位置；
最小宽度：160px；
}
.下拉内容a{
浮动：无；
填充：12px 16px；
文字装饰：无；
显示：块；
文本对齐：左对齐；
}
.表演{
显示：块；
}
.导航条img{
宽度：自动；
高度：200px；
利润上限：-80px；
}
.navbar.icon{
显示：无；
}
@媒体屏幕和屏幕（最大宽度：600px）{
.导航栏a：不是（：第一个孩子），
.导航栏.下拉列表{
显示：无；
}
.导航栏a.图标{
浮动：对；
显示：块；
}
}
@媒体屏幕和屏幕（最大宽度：600px）{
.导航栏{
位置：相对位置；
}
.navbar.responsive.icon{
位置：绝对位置；
右：0；
排名：0；
}
/*包括在内。请在这里下拉*/
.navbar.a，
.navbar.responsive.下拉列表{
浮动：无；
显示：块；
文本对齐：左对齐；
}
/*在汉堡包导航中相对定位内容，使其不会与其他内容重叠*/
.下拉内容{
位置：相对位置；
}
}

文件夹

非常感谢您！真管用！