Html 将鼠标悬停在单个菜单项(而不是整个菜单)上时显示下拉菜单
我目前有一个Html 将鼠标悬停在单个菜单项(而不是整个菜单)上时显示下拉菜单,html,css,flexbox,Html,Css,Flexbox,我目前有一个部分,它是一个弹性盒子。当我将鼠标悬停在Vsdiv上时,我正试图获得一个下拉菜单。不幸的是,该div位于节标记内,下拉菜单不会出现 当前设置代码的方式会导致当我将鼠标悬停在部分的任何部分上时出现下拉菜单。我希望下拉菜单仅在我将鼠标悬停在Vs.div上时出现 这是该部分的图像 .line{ 高度:4px; 弹性:1; 背景:红色; 利润率:0.10px; } 部分{ 显示器:flex; 对齐项目:居中; } .家{ 左边距:50像素; } m{ 右边距:30px; } .注销{ 右
部分
,它是一个弹性盒子。当我将鼠标悬停在Vs
div上时,我正试图获得一个下拉菜单。不幸的是,该div位于节
标记内,下拉菜单不会出现
当前设置代码的方式会导致当我将鼠标悬停在部分的任何部分上时出现下拉菜单。我希望下拉菜单仅在我将鼠标悬停在Vs.
div上时出现
这是该部分的图像
.line{
高度:4px;
弹性:1;
背景:红色;
利润率:0.10px;
}
部分{
显示器:flex;
对齐项目:居中;
}
.家{
左边距:50像素;
}
m{
右边距:30px;
}
.注销{
右边距:50px;
}
保险商实验室{
列表样式类型:无;
边缘顶部:20px;
}
.dropDown:悬停~.dropDownContent{
显示:块;
}
.下载内容{
显示:无;
}
家
报告
Vs。
- 名字1
- 名称2
- 名字3
在代码中,下拉菜单定位为主菜单的同级菜单。最好将下拉列表嵌套在相关的主菜单项中。试试这个:
.dropDownVs:hover.dropDownContent{
显示:块;
位置:绝对位置;
}
.下载内容{
显示:无;
}
.线路{
高度:4px;
弹性:1;
背景:红色;
利润率:0.10px;
}
部分{
显示器:flex;
对齐项目:居中;
位置:相对位置;
}
.家{
左边距:50像素;
}
m{
右边距:30px;
}
.注销{
右边距:50px;
}
保险商实验室{
填充:0;
列表样式类型:无;
}
家
报告
Vs。
- 名字1
- 名称2
- 名字3
你能提供一个提琴吗?我把代码放进了一个提琴中,它给出的结果与我的文本编辑器略有不同。这是小提琴,非常感谢你的帮助,但我有几个问题。我在谷歌搜索中看到过类似的东西。dropDownVs>li{},但我不明白它们的意思,所以我避免使用它们。像那样使用>时会发生什么情况?
是一个子选择器。它以元素的子元素为目标。