Php 悬停在李的上方，而不是不高兴的div

我的页眉中有ol。在最后两个页面中，有一个用户名和个人资料。我想在鼠标悬停在用户名或个人资料图片上显示下拉菜单。但它并没有在悬停时显示菜单。在我的下拉内容中有一个lebel。在mozilla中，它不会在hover上显示任何内容，在chrome中，它也不会在hover上显示任何内容，但默认情况下，它会显示标签

.head{
排名：0；
背景#4242；
填充：1px；
身高：10%；
}
李{
显示：内联块；
颜色：#E0；
光标：指针；
填充：10px 10px 2px 10px；
字体大小：20px；
}
李：悬停{
颜色：白色；
}
李：很活跃{
颜色：白色；
边框底部：1px纯白；
}
.对{
浮动：对；
颜色：白色；
}
#剖面图{
边界半径：50%；
宽度：40px；
高度：40px；
余量：-10px 50px 0 20px；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f1f1；
最小宽度：150px；
右：0；
右边距：20px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.下拉式内容标签{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
.下拉内容标签：悬停{背景色：#ddd；}
.right:悬停.下拉内容{display:block；}

家
新应用程序
挂起的应用程序
已批准
贷款结构

ABC

设置

请像这样重新构造html，这将是显示下拉列表的理想选择

.show-settings:hover .dropdown-content {
  display: block;
}

下面的类将用于显示隐藏的下拉列表

.show-settings:hover .dropdown-content {
  display: block;
}

。对{
浮动：对；
颜色：黑色；
位置：相对位置；
}
#剖面图{
边界半径：50%；
宽度：40px；
高度：40px；
余量：-10px 50px 0 20px；
}
.显示设置：悬停.下拉内容{
显示：块；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f1f1；
最小宽度：150px；
右：0；
右边距：20px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
溢出：隐藏；
}
.下拉式内容标签{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
.下拉式内容标签：悬停{
背景色：#ddd；
}

家
新应用程序
挂起的应用程序
已批准
贷款结构

用户名
设置

在两个CSS选择器之间放置空格（

.class1.class2

），指定您想要一个hirachy-当

.class2

嵌套在

class1

中时。您不能仅通过CSS获取元素的父元素。因此，为了解决您的问题，您应该使用js，或者在

元素中包含

.dropdown content

（将其从

更改为
，因为内部列表中只有
元素有效），然后通过（或者通过，我在这里不使用它）访问它：

解决方案1:


。对{
浮动：对；
}
#剖面图{
边界半径：50%；
宽度：40px；
高度：40px；
余量：-10px 50px 0 20px；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f1f1；
最小宽度：150px；
右：0；
右边距：20px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.下拉式内容标签{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
.下拉式内容标签：悬停{
背景色：#ddd；
}
.right:hover~.dropdown content、/*或.right:hover+.dropdown content与相邻的同级选择器*/
.dropdown内容：悬停/*因为悬停时下拉列表不会消失*/{
显示：块；
}


家
新应用程序
挂起的应用程序
已批准
贷款结构

ABC

设置


欢迎使用SO，请将您的代码添加到代码段中，以便有人很快解决了您的问题您需要javascript或jQuery来解决此问题。CSS无法引用父选择器。
。下拉内容
不是
的后代。右
因此您的选择器
。右：悬停。下拉内容
不正确。好的，我找到并解决了它，谢谢。它在中不起作用chrome@user10184882解决方案1或2？@user10184882 I修复了解决方案2的一个问题。未在中工作chrome@user10184882Chrome版本？好的，现在我的编辑也可以了，你的代码也可以了。是缓存问题。@user10184882哦，好的