Html CSS-按钮：焦点不在´；我不允许点击链接

我试图建立一个网站，当我点击“菜单”时，它会显示带有链接的导航栏。当我试图点击其中一个链接时，它们突然消失了。我知道这是因为聚焦按钮不再是目标按钮了，但我怎样才能让它让我点击呢？ 一些图片让您更好地理解--> -
一些样式的CSS可能缺失，但正是这些CSS给了我问题

nav{显示：无；
高度：13公分；
垫面：1米；
边框左下半径：1米；
边框右下半径：1米；
}
.导航按钮{
文本对齐：居中；
文字装饰：无；
宽度：30%；
字体系列：无衬线；
颜色：#1b5e20；
垫面：0.2米；
字体大小：粗体；
左边缘：35%；
边缘底部：0.5em；
边界半径：1米；
字体大小：100%；
背景色：白色；
}
按钮{高度：3em；
宽度：100%；
背景色：#1b5e20；
颜色：白色；
过渡：0.3s；
显示：块；
边框样式：无；}
.菜单{字体系列：无衬线；
文本对齐：居中；
左边距：0自动；
右边距：0自动；
背景色：白色；
边界半径：1米；
颜色：白色；
背景色：#4c8c4a；
左：1米；
右侧填充：1em；
字号：1.6em；
}
.结束{
显示：内联；
文本对齐：居中；
文字装饰：无；
字体系列：无衬线；
颜色：白色；
填充：0.3em；
字体大小：粗体；
左缘：48%；
利润率最高：5%；
边界半径：100em；
背景色：暗色；
光标：指针；
}
.close:悬停.close:活动{显示：无；}

Mediterrane Pflanzen-Alongi摄影画廊
按钮：活动+导航，按钮：焦点+导航{显示：块；}
按钮：活动+导航，按钮：焦点+导航{显示：块；}
X

不要使用焦点作为切换显示内容的手段。使用JavaScript并设置适当的ARIA属性。请注意，对于我们这些主要使用移动设备的人来说，使用鼠标悬停会破坏你的网站。我的手机和平板电脑没有悬停功能。为什么在代码中有两次详细说明-

按钮：active+nav，按钮：focus+nav{display:block；}

？我建议使用复选框打开/关闭菜单。在这种情况下，不需要javascript。聚焦也不会有问题。