Html 单击后消失的下拉导航

我试着让我的导航在点击时下降，点击时也会上升（消失）。主要是手机版，因为我会在pc版上使用hover。我试过使用focus和active，但都不起作用。我真的不想尝试javascript。我是css新手，但我会感谢你的评论

.navbar{
溢出：隐藏；
}
纳瓦尔先生{
浮动：左；
字体大小：16px；
颜色：黑色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
.下拉列表{
浮动：左；
溢出：隐藏；
}
.下拉菜单{
字体大小：16px；
边界：无；
大纲：无；
颜色：#000；
填充：14px 16px；
背景色：继承；
字体家族：继承；
保证金：0；
}
.下拉内容{
显示：无；
位置：绝对位置；
最小宽度：160px；
z指数：1；
}
.下拉内容a{
浮动：无；
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
文本对齐：左对齐；
}
.下拉：悬停.下拉内容{
显示：块；
}

下拉列表

您可以将焦点放在按钮上完成此操作。您必须添加媒体查询以调整工作时间和内容，但这是您为open所做的工作。+表示“我旁边的项目”。我已经注释掉了演示的悬停

.dropbtn:focus + .dropdown-content {
  display: block;
}

.navbar{
溢出：隐藏；
}
纳瓦尔先生{
浮动：左；
字体大小：16px；
颜色：黑色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
.下拉列表{
浮动：左；
溢出：隐藏；
}
.下拉菜单{
字体大小：16px；
边界：无；
大纲：无；
颜色：#000；
填充：14px 16px；
背景色：继承；
字体家族：继承；
保证金：0；
}
.下拉内容{
显示：无；
位置：绝对位置；
最小宽度：160px；
z指数：1；
}
.下拉内容a{
浮动：无；
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
文本对齐：左对齐；
}
/*.下拉：悬停.下拉内容{
显示：块；
}*/
.dropbtn:focus+.dropdown内容{
显示：块；
}

下拉列表

您可以将焦点放在按钮上完成此操作。您必须添加媒体查询以调整工作时间和内容，但这是您为open所做的工作。+表示“我旁边的项目”。我已经注释掉了演示的悬停

.dropbtn:focus + .dropdown-content {
  display: block;
}

.navbar{
溢出：隐藏；
}
纳瓦尔先生{
浮动：左；
字体大小：16px；
颜色：黑色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
.下拉列表{
浮动：左；
溢出：隐藏；
}
.下拉菜单{
字体大小：16px；
边界：无；
大纲：无；
颜色：#000；
填充：14px 16px；
背景色：继承；
字体家族：继承；
保证金：0；
}
.下拉内容{
显示：无；
位置：绝对位置；
最小宽度：160px；
z指数：1；
}
.下拉内容a{
浮动：无；
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
文本对齐：左对齐；
}
/*.下拉：悬停.下拉内容{
显示：块；
}*/
.dropbtn:focus+.dropdown内容{
显示：块；
}

下拉列表

如果答案有帮助，请标记它如果答案有帮助，请标记它