Javascript CSS如何在i标记的悬停处显示面板

我想在用户将鼠标悬停在购物车图标上时打开弹出面板，如

这与SO的收件箱类似：

我试过了，但看起来我遗漏了什么

。下拉式内容{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.下拉：悬停.下拉内容{
显示：块；
}

这是一个测试

您需要+号，因为它是同级元素

尝试添加css：

.dropdown:hover + .dropdown-content {
    display: block;
}

工作小提琴：

（使用“Hello”，因为我没有加载字体）

参考：

空间用于父/子关系

更新： 在聊天中发言后，问题中提出的HTML与实际代码不同

实际HTML：

<p class="w3-right">
    <i class="fa fa-shopping-cart w3-margin-right dropdown" onmouseover="javascript:void(0)"></i>
</p>
<div class="dropdown-content">
    <p> This is a test</p>
</div>

这是一个测试

---

同级选择器不工作，因为“下拉”和“下拉内容”实际上不是同级。将“dropdown”类添加到“p”标记似乎解决了这个问题

您也可以使用“+”或“~”，如下所示：

.dropdown:hover + .dropdown-content {
    //your css code
}
.dropdown:hover ~ .dropdown-content {
    //your css code
}

---

小提琴能按要求演奏吗？如果是的话，我可以帮你把它写进你的代码里。小提琴正在工作。但不是在我的链接模板。你能给我你的链接吗？我可以在那里调试。感谢您花时间在这里进行更改：示例中给出的代码并不反映您配对时显示的代码。请更新为您的当前代码，以便其他人可以提供帮助。