Html 下拉列表可以'；不要停留在鼠标悬停状态

当我将鼠标悬停在列表项上时，我创建了下拉列表，它显示为我想要的样子，但如果我将鼠标拖动到列表项上，它将无法保持不变。每当我尝试用鼠标在列表项上选择列表项时，它将消失。我尝试了很多次，但我自己解决了这个问题

*{
边际：0px；
填充：0px；
框大小：边框框；
}
身体{
高度：100vh；
背景#d936c6；
}
.dropdown{/*设置下拉列表容器的样式*/
高度：10vh；
背景：#fff；
显示器：flex；
证明内容：中心；
对齐项目：居中；
保证金：自动；
}
.项目{
位置：相对位置；
}
.项目ul{/*样式ul o*/
位置：绝对位置；
背景#520348；
边缘顶部：10px；
宽度：200px；
高度：200px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
弯曲方向：立柱；
列表样式：无；
边界半径：5px；
不透明度：0；
指针事件：无；
转换：translateY（-10px）；
过渡：所有0.4s缓解；
}
a.项目a{
文字装饰：无；
颜色：#000；
}
.下拉按钮{
背景：无；
边界：无；
文字装饰：无；
颜色：#000；
光标：指针；
字号：18px；
}
.下拉按钮：悬停{
背景：rgb（224）；
}
李项目{
背景#5e2e58；
宽度：100%；
身高：100%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
李项目{
背景#b581ae；
}
.项目按钮：悬停+ul{
不透明度：1；
变换：translateY（0px）；
指针事件：全部；
}
.李项目：悬停{
背景#5e2e58；
宽度：100%；
身高：100%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}

项目

您需要稍微重构一下HTML。问题是CSS指示当按钮悬停时将显示下拉列表UL。一旦你将鼠标从按钮上移开，UL就会消失

CSS技巧对仅CSS下拉菜单有很好的描述：

---

实际上，您只需要将

ul:hover，

添加到

。项目按钮：hover+ul{

工作代码段：

*{
边际：0px；
填充：0px；
框大小：边框框；
}
身体{
高度：100vh；
背景#d936c6；
}
.dropdown{/*设置下拉列表容器的样式*/
高度：10vh；
背景：#fff；
显示器：flex；
证明内容：中心；
对齐项目：居中；
保证金：自动；
}
.项目{
位置：相对位置；
}
.项目ul{/*样式ul o*/
位置：绝对位置；
背景#520348；
边缘顶部：10px；
宽度：200px；
高度：200px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
弯曲方向：立柱；
列表样式：无；
边界半径：5px；
不透明度：0；
指针事件：无；
转换：translateY（-10px）；
过渡：所有0.4s缓解；
}
a.项目a{
文字装饰：无；
颜色：#000；
}
.下拉按钮{
背景：无；
边界：无；
文字装饰：无；
颜色：#000；
光标：指针；
字号：18px；
}
.下拉按钮：悬停{
背景：rgb（224）；
}
李项目{
背景#5e2e58；
宽度：100%；
身高：100%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
李项目{
背景#b581ae；
}
ul：悬停，/*添加*/
.项目按钮：悬停+ul{
不透明度：1；
变换：translateY（0px）；
指针事件：全部；
}
.李项目：悬停{
背景#5e2e58；
宽度：100%；
身高：100%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}

项目

嗨，你查过我的答案了吗？