Html 如何在调整窗口大小时防止导航栏元素重叠？

这是HTML。它在全屏上看起来是正确的。调整浏览器大小（特别是使其变小）时，导航栏元素彼此重叠。我想不出怎么修理它。我还包括了CSS。我猜这和定位有关？我尝试将相对位置添加到导航元素，但没有解决问题。欢迎您的任何意见。多谢各位

#主导航{
左边距：20px；
边缘顶端：40px；
}
.下拉按钮{
背景色：#F4D35E；
颜色：#083D77；
字体大小：粗体；
字体系列：Futura，无衬线；
文字装饰：无；
填充：16px；
字号：28px；
边界：无；
光标：指针；
}
.下拉按钮a{
文字装饰：无；
}
.下拉菜单a:悬停{
颜色：#ED2E07；
}
.下拉列表{
位置：相对位置；
显示：内联块；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#F4D35E；
颜色：#083D77；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
边缘顶部：15px；
}
.下拉内容a{
填充：12px 16px；
文本对齐：居中；
文字装饰：无；
显示：块；
颜色：#083D77；
}
.featRecipe{
显示器：flex；
柔性包装：nowrap；
左边距：75px；
}
.drink1，
德林先生2{
右边距：110px；
}
费特利先生{
最大宽度：300px；
}
一天喝一杯{
显示器：flex；
柔性包装：nowrap；
左边距：75px；
}
伊姆戈德先生，
.图像，
英格先生{
右边距：75px；
}
#李丽娜{
显示：内联；
右边填充：10px；
}
.图书馆{
左边距：20px；
边缘顶端：40px；
}
.喝{
显示器：flex；
柔性包装：nowrap；
}
.顶{
文本对齐：居中；
边缘底部：40px；
}
html{
背景：#EBEBD3；
}
#网站名称{
字体系列：“画笔脚本MT”，无衬线；
文本对齐：居中；
字体大小：粗体；
字体大小：70px；
颜色：#ED2E07；
页边距底部：0；
边缘顶部：20px；
}
#页面标题{
边缘顶端：40px；
边缘底部：50px；
文本对齐：居中；
字体大小：40px；
字体系列：Andale Mono、monospace；
颜色：#ED2E07；
}
.身体{
颜色：#083D77；
文本对齐：居中；
}
主要{
颜色：#083D77；
字体系列：Andale Mono、monospace；
}
主h2、h3、h4{
颜色：#F95738；
}
.h3配方{
文本对齐：居中；
颜色：#083D77；
字体系列：Andale Mono、monospace；
}
李署长{
最大宽度：500px；
}
#图书馆导航a{
字体大小：20px；
颜色：#083D77；
}
.图书馆h3{
字体大小：24px；
字体大小：粗体；
}
.下拉列表内容a：悬停{
背景色：#EBEBD3；
}
.下拉：悬停.下拉内容{
显示：块；
}
.下拉：悬停.下拉按钮{
背景色：#EE964B；
}
img{
边框：实心5px#F95738；
}
#图书馆a：参观{
颜色：#083D77；
}
a:参观过{
颜色：#083D77；
字体大小：16px；
}
.下载按钮a:已访问{
颜色：#083D77；
}
.下拉列表内容a：悬停{
颜色：#ED2E07；
}

饮酒控制
函数con（）{
var ans=window.confirm（“您21岁以上吗？\n\n如果是，请按“确定”，如果不是，请按“取消”）；
如果（ans==false）{
window.location=”http://www.google.com";
}
}
setTimeout（“con（）”，2000）；
饮酒控制
欢迎来到酒神大师！
我们努力为您提供各种鸡尾酒配方的完整库！快乐的混合
今日饮品
成分

10片新鲜薄荷叶
1/2石灰，切成4个楔子
2勺白糖
1.5盎司白朗姆酒
1/2杯俱乐部苏打水

方向
将薄荷叶和1个石灰楔放入一个坚固的玻璃杯中。用捣碎机碾碎薄荷和莱姆，释放薄荷油和莱姆汁
再加入2个青柠块和糖，再次搅拌以释放青柠汁
在玻璃杯里加满冰块，几乎到杯顶
把朗姆酒倒在冰上，然后在杯子里装满碳酸水
搅拌，品尝，并添加更多的糖，如果需要。用剩下的石灰楔装饰
&抄袭；由罗曼·库德里亚索夫创作

将

下拉列表的CSS更改为

.dropDown {
    position: relative;
    display: inline-flex;
}

然后在上面加上一些填充物或边距，这样它们就不会接触了。
谢谢！内联块和内联flex之间有什么区别？我建议添加
text align:center至
#mainNav
。Flex允许在CSS中以不同的位置放置项目时，它们不会相互接触，这似乎是最简单的修复方法。我还要加上
margintop:10px
到
下拉列表
，这样它们就不会完全接触。谢谢。修复后看起来好多了！