Javascript CSS下拉响应子菜单

我是新手，正在学习CSS代码。我想在仪表板菜单中添加下拉子菜单，但我对css下拉响应菜单没有经验，也不知道如何应用它，下面是我从其他资源中找到的代码，我在其中添加了仪表板菜单和子菜单。此代码可以在移动设备中运行

当我在仪表板中添加下拉子菜单时，css在导航时不会消失。代码如下：

/*当用户单击图标时，在向topnav添加和删除“响应”类之间切换*/
函数myFunction（）{
document.getElementsByClassName（“topnav”）[0].classList.toggle（“响应”）；
}

/*从列表中删除边距和填充，并添加黑色背景色*/
ul.topnav{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#333；
}
/*将列表项并排浮动*/
ul.topnav li{float:左；}
/*设置列表项内链接的样式*/
ul.topnav li a{
显示：内联块；
颜色：#F2F2；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
过渡：0.3s；
字号：17px；
}
/*更改悬停时链接的背景色*/
ul.topnav li a:hover{背景色：#111；}
/*隐藏包含应在小屏幕上打开和关闭topnav的链接的列表项*/
ul.topnav li.icon{显示：无；}
@媒体屏幕和屏幕（最大宽度：680px）{
ul.topnav li:not（：第一个子项）{display:none；}
ul.topnav li.icon{
浮动：对；
显示：内联块；
}
}
@媒体屏幕和屏幕（最大宽度：680px）{
ul.topnav.responsive{位置：相对；}
ul.topnav.responsive li.icon{
位置：绝对位置；
右：0；
排名：0；
}
ul.topnav.li{
浮动：无；
显示：内联；
}
ul.topnav.lia{
显示：块；
文本对齐：左对齐；
}
}

我在这里向您展示了我对父结构的理解

：悬停

仅用于演示案例

您可以更改为Javascript

单击

。

/*当用户单击图标时，在向topnav添加和删除“响应”类之间切换*/
函数myFunction（）{
document.getElementsByClassName（“topnav”）[0].classList.toggle（“响应”）；
}

/*从列表中删除边距和填充，并添加黑色背景色*/
ul.topnav{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#333；
}
/*将列表项并排浮动*/
ul.topnav li{float:左；}
/*设置列表项内链接的样式*/
ul.topnav li a{
显示：内联块；
颜色：#F2F2；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
过渡：0.3s；
字号：17px；
}
/*更改悬停时链接的背景色*/
ul.topnav li a:hover{背景色：#111；}
/*隐藏包含应在小屏幕上打开和关闭topnav的链接的列表项*/
ul.topnav li.icon{显示：无；}
.hidden{显示：无}
#仪表板：悬停+。隐藏{显示：阻止！重要}
.hidden{显示：无}
.upper:hover.hidden{display:block}
@媒体屏幕和屏幕（最大宽度：680px）{
ul.topnav li:not（：第一个子项）{display:none；}
ul.topnav li.icon{
浮动：对；
显示：内联块；
}
}
@媒体屏幕和屏幕（最大宽度：680px）{
ul.topnav.responsive{位置：相对；}
ul.topnav.responsive li.icon{
位置：绝对位置；
右：0；
排名：0；
}
ul.topnav.li{
浮动：无；
显示：内联；
}
ul.topnav.lia{
显示：块；
文本对齐：左对齐；
}
}

下拉链接的

/*样式*/
.topnav>li:悬停在ul a上{
颜色：#fff；
高度：40px；
线高：40px；
}
/*下拉链接的悬停状态*/
.topnav>li:悬停ul a:悬停{
颜色：#fff；
}
/*隐藏下拉链接，直到需要它们*/
.topnav>li ul{
显示：无；
}
/*使下拉链接垂直*/
.topnav>li ul li{
显示：块；
浮动：无；
}
/*防止文本换行*/
.topnav>li ul li a{
宽度：自动；
最小宽度：100px；
填充：0 20px；
}
/*悬停时显示下拉列表*/
.topnav>ul li a:悬停+隐藏，
.隐藏：悬停{
显示：块；
}

对不起。您的预期行为是什么？我的预期行为是，我希望使用css将子菜单“profile”、“change password”和“other”隐藏在菜单“dashboard”中，并在mobile中响应。它在您的

HTML

结构中不起作用。你想成为

.hidden

仪表板

的
子
。这不起作用
.hidden{display:none}#dashboard:hover~.hidden{display:block}
。然后你可以做
。隐藏{display:none}#仪表板：悬停。隐藏{display:block}
。是的，谢谢，我现在可以隐藏#仪表板的子项，子项消失了，现在我想在导航#仪表板菜单时让它出现，我如何应用这个css？看看我的答案。%）谢谢，我现在可以隐藏#dashboard的子项了，子项消失了，现在我想在导航#dashboard菜单时让它出现，我如何应用这个css？你也必须更改
HTML
。看看这个答案。%）PI尝试使下拉菜单垂直。我把密码放在下面的答案上。