Html 在悬停状态下制作复选框菜单下拉列表

我已经有5年没有做过任何HTML或CSS了，我正试图回到它来帮助当地的企业。我已经创建了一个带有DIV类和CSS样式的菜单，但是我不知道如何让我的菜单在悬停状态下展开，而不是单击

我已经试过添加这样的行了 .nav:hover.item{display:block；}
无济于事

/*全球的*/
html，正文{
宽度：100%；
保证金：0；
填充：0；
字体系列：无衬线；
位置：顶部
}
.多级，.项目ul，.导航
输入[type=“checkbox”]{
显示：无；
}
#菜单：选中~多级，.项目输入：选中~ul{
显示：块；
}
标签：悬停{
光标：指针；
}
标签{
宽度：100%；
显示：块；
z指数：3；
位置：相对位置；
}
.导航{
宽度：100%；
背景色：深蓝色；
颜色：白色；
溢出x：隐藏；
边框底部：1px实心#CFD8DC；
}
.nav ul、.nav li、标签{
线高：25px；
保证金：0；
填充：0.2em；
列表样式：无；
文字装饰：无；
颜色：白色；
字号：100；
宽度：100%；
}
.第ul项{
填充：0.25em；
}
李娜先生{
线高：25px；
保证金：0；
填充：0.4em；
列表样式：无；
文字装饰：无；
颜色：浅蓝色；
字号：100；
}
☰
资源



位置信息







行程安排


初级保健

实际上，您离一个可行的解决方案不远了。最简单的方法是，接近您编写的内容，是

.nav:hover ul{display:block}

，但这会立即打开整个菜单，包括所有子菜单。如果只打开悬停项目的子菜单，感觉会好一点：

html，
身体{
宽度：100%；
保证金：0；
填充：0；
字体系列：无衬线；
位置：顶部；
}
.多层次，
.第ul项，
.nav输入[type=“checkbox”]{
显示：无；
}
#菜单：选中~多级，
.项目输入：选中~ul{
显示：块；
}
/*变化*/
.导航：悬停。多级，
.项目：悬停>ul，
.子项：悬停>ul{
显示：块；
}
/*/变化*/
标签：悬停{
光标：指针；
}
标签{
宽度：100%；
显示：块；
z指数：3；
位置：相对位置；
}
.导航{
宽度：100%；
背景色：深蓝色；
颜色：白色；
溢出x：隐藏；
边框底部：1px实心#CFD8DC；
}
.nav ul，
李国荣先生，
标签{
线高：25px；
保证金：0；
填充：0.2em；
列表样式：无；
文字装饰：无；
颜色：白色；
字号：100；
宽度：100%；
}
.第ul项{
填充：0.25em；
}
李娜先生{
线高：25px；
保证金：0；
填充：0.4em；
列表样式：无；
文字装饰：无；
颜色：浅蓝色；
字号：100；
}

☰
资源



位置信息







行程安排


初级保健

实际上，您离一个可行的解决方案不远了。最简单的方法是，接近您编写的内容，是

.nav:hover ul{display:block}

，但这会立即打开整个菜单，包括所有子菜单。如果只打开悬停项目的子菜单，感觉会好一点：

html，
身体{
宽度：100%；
保证金：0；
填充：0；
字体系列：无衬线；
位置：顶部；
}
.多层次，
.第ul项，
.nav输入[type=“checkbox”]{
显示：无；
}
#菜单：选中~多级，
.项目输入：选中~ul{
显示：块；
}
/*变化*/
.导航：悬停。多级，
.项目：悬停>ul，
.子项：悬停>ul{
显示：块；
}
/*/变化*/
标签：悬停{
光标：指针；
}
标签{
宽度：100%；
显示：块；
z指数：3；
位置：相对位置；
}
.导航{
宽度：100%；
背景色：深蓝色；
颜色：白色；
溢出x：隐藏；
边框底部：1px实心#CFD8DC；
}
.nav ul，
李国荣先生，
标签{
线高：25px；
保证金：0；
填充：0.2em；
列表样式：无；
文字装饰：无；
颜色：白色；
字号：100；
宽度：100%；
}
.第ul项{
填充：0.25em；
}
李娜先生{
线高：25px；
保证金：0；
填充：0.4em；
列表样式：无；
文字装饰：无；
颜色：浅蓝色；
字号：100；
}

☰
资源



位置信息







行程安排


初级保健