Html 下拉菜单悬停状态

我正在使用一个下拉菜单，遇到了一点麻烦，让悬停效果按照我的预期工作。当我将鼠标悬停在一个图像上时，我希望下拉操作能够发生，这是正常的。但是我也希望图像下面的文本像一个标签一样连接文本和下拉菜单

我把这个例子放在一起给出了一个大致的想法。所以当我把鼠标悬停在按钮上时，“悬停”文本的背景应该变成绿色。但它只有在我直接悬停在文本上时才会变成绿色，我希望它在我悬停在实际按钮上时运行悬停效果。我希望这有意义

以下是html：

<div class="menu">
<ul>
    <li><div class="btn"><p>HOVER</p></div>
        <ul>
            <li><a href="#">Menu Item</a></li>
            <li><a href="#">Menu Item</a></li>
        </ul>
    </li>
</ul>

任何帮助都将不胜感激

添加这个

li:hover div{  background-position: -5px -120px; color:green} 

---

对于文本BG颜色，需要在文本周围添加另一个标记

li:hover span{  background-color:#78a802; color:green; display:block} 
li:hover div{  background-position: -5px -120px; color:green}

---

在CSS中添加以下属性：

.btn:hover p {
    background-color: #78a802;
}

---

更新。

当我将鼠标悬停在按钮上时，“悬停”文本的背景应变为绿色。很抱歉，图像下方文本的背景应与下拉列表的颜色相同，如果您查看JSFIDLE示例并将鼠标放在按钮下方的文本上，背景将变为绿色，但我希望在您将光标放在图像上时出现这种情况谢谢，我希望文本的背景变为绿色，而不是变为绿色。我认为你的解决方案是可行的，但他需要一个“选项卡连接”，我认为这将导致将你的规则更改为如下内容：li:hover div{background position:-5px-120px；背景颜色：#78a802}完美，一旦用户进入下拉列表，它将保持悬停状态！可爱，我真的很感激！这就成功了，太棒了！一旦用户将鼠标移动到下拉菜单中，是否有办法保持悬停状态处于活动状态？@acott您可以使用

li

而不是

.btn

。

.btn:hover p {
    background-color: #78a802;
}