Javascript 响应导航-flexbox下拉列表导致溢出

目前正在做一个快速的网站。导航样式和工作正常，但我实现了一个下拉菜单作为导航项。这导致了三个我似乎无法解决的问题：

在导航切换上，内容彼此重叠

在导航开关上，导航使您可以滚动，甚至可以滚动 鼠标悬停时，桌面屏幕上的下拉列表有展开的空间

在桌面屏幕上，导航项通过滚动条在标题内引起下降

在这件事上已经有一段时间了，如果您能提供任何帮助，我们将不胜感激

函数NavToggle（）{
var tn=document.getElementById（“导航栏”）
如果（tn.style.display==“无”）{
tn.style.display=“块”；
}否则{
tn.style.display=“无”；
}
}

*{
框大小：边框框；
字体系列：无衬线；
保证金：0；
填充：0；
}
html，
身体{
溢出y：自动；
}
保险商实验室{
保证金：0；
填充：0；
}
/*标题和导航*/
标题{
宽度：100vw；
高度：自动；
背景色：#222；
位置：固定；
z指数：1；
溢出y：自动；
最大高度：100vh；
溢出x：隐藏；
}
导航{
显示：无；
z指数：2；
}
.标题包装{
显示器：flex；
对齐项目：居中；
证明内容：之间的空间；
高度：50px；
宽度：100vw；
填充：0 10px；
}
/*菜单基样式*/
导航ul{
列表样式类型：无；
}
李海军{
高度：50px；
}
.title wrapper>a{
字体大小：16px；
}
a{
颜色：#999；
}
导航a{
文字装饰：无；
显示器：flex；
对齐项目：居中；
调整内容：灵活启动；
身高：100%；
字体大小：14px；
左侧填充：10px；
}
导航a：悬停{
颜色：#fff；
}
/*菜单切换样式*/
.菜单切换{
字号：26px；
颜色：#fff；
光标：指针；
填充：0 15px 0 10px；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.菜单切换按钮{
填充：继承；
}
@媒体屏幕和屏幕（最小宽度：930px）{
导航ul{
显示器：flex；
}
/*标题内容*/
.收割台容器{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.菜单切换{
显示：无；
}
.标题包装{
最大宽度：1200px；
宽度：100%；
显示器：flex；
证明内容：中心；
填充：0 20px；
}
.标题标题{
字号：18px；
}
#导航条{
宽度：70%；
显示：内联flex；
证明内容：之间的空间；
}
a{
填充：0 1rem；
}
.导航下拉列表{
位置：相对位置；
}
.nav下拉菜单{
显示：无；
位置：绝对位置；
z指数：2；
}
.nav下拉菜单：悬停>.nav下拉菜单{
显示：块；
}
}

要解决前两个问题，您必须将

导航下拉列表的
显示设置为
内联块
：

.nav-dropdown {
  display: inline-block;
}

要解决第三个问题，必须将标题的
溢出
设置为
可见
，因为已将其设置为
自动
，如果内容溢出，将生成滚动条

.header-container {
  overflow: visible;
}

这是一个工作示例（不解决任何其他问题）：


函数NavToggle（）{
var tn=document.getElementById（“导航栏”）
如果（tn.style.display==“无”）{
tn.style.display=“块”；
}否则{
tn.style.display=“无”；
}
}
*{
框大小：边框框；
字体系列：无衬线；
保证金：0；
填充：0；
}
html，
身体{
溢出y：自动；
}
保险商实验室{
保证金：0；
填充：0；
}
/*标题和导航*/
标题{
宽度：100vw；
高度：自动；
背景色：#222；
位置：固定；
z指数：1；
溢出y：自动；
最大高度：100vh；
溢出x：隐藏；
}
导航{
显示：无；
z指数：2；
}
.标题包装{
显示器：flex；
对齐项目：居中；
证明内容：之间的空间；
高度：50px；
宽度：100vw；
填充：0 10px；
}
/*菜单基样式*/
导航ul{
列表样式类型：无；
}
李海军{
高度：50px；
}
.title wrapper>a{
字体大小：16px；
}
a{
颜色：#999；
}
导航a{
文字装饰：无；
显示器：flex；
对齐项目：居中；
调整内容：灵活启动；
身高：100%；
字体大小：14px；
左侧填充：10px；
}
导航a：悬停{
颜色：#fff；
}
/*菜单切换样式*/
.菜单切换{
字号：26px；
颜色：#fff；
光标：指针；
填充：0 15px 0 10px；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.菜单切换按钮{
填充：继承；
}
.导航下拉列表{
显示：内联块；
边缘底部：150px；
}
@媒体屏幕和屏幕（最小宽度：930px）{
导航ul{
显示器：flex；
背景色：#222；
}
/*标题内容*/
.收割台容器{
显示器：flex；
证明内容：中心；
对齐项目：居中；
溢出：可见；
}
.菜单切换{
显示：无；
}
.标题包装{
最大宽度：1200px；
宽度：100%；
显示器：flex；
证明内容：中心；
填充：0 20px；
}
.标题标题{
字号：18px；
}
#导航条{
宽度：70%；
显示：内联flex；
证明内容：之间的空间；
}
a{
填充：0 1rem；
}
.导航下拉列表{
位置：相对位置；
}
.nav下拉菜单{
显示：无；
位置：绝对位置；
z指数：2；
}
.nav下拉菜单：悬停>.nav下拉菜单{
显示：块；
}
.导航下拉列表{
页边距底部：0；
}
}