下拉菜单悬停状态

Question

我正在处理一个下拉菜单，并且遇到了一个麻烦，让悬停效果按我的预期工作。当我将鼠标悬停在图像上时，我希望进行下拉操作，这很好用。但我也希望图像下方的文本充当连接文本和下拉菜单的选项卡。

我把这个jsfiddle 的例子放在一起给出一个粗略的想法。所以当我将鼠标悬停在按钮上时，“HOVER”文本的背景应该变成绿色。但是当我直接将鼠标悬停在文本上时它只会变成绿色，我希望它在我将鼠标悬停在实际按钮上时运行悬停效果。我希望这是有道理的？

这里是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>

还有 CSS：

.btn{
    display: block;
    width: 68px;
    height: 22px;
    padding-top: 70px;
    font-weight: bold;
    float: left;
    padding-right:30px;
    text-align:center;
}

.btn{
    background: url("http://www.aidancotter.com/images/face.png") no-repeat -5px 0px;
}

.btn:hover{
    background-position: -5px -120px;
}

.menu ul li{
    list-style:none;
}

.menu{
    display: inline;
    float: left;
    padding-right:30px;
    padding:20px 0 0 20px;
}

a{
    text-decoration:none;
    color:#000;
}

.btn p{
    font-family:Arial;
    padding:10px;
    color:#000;
    padding:5px;
    border-radius:5px;
}

.btn p:hover{
    background:#78a802;
    cursor:pointer;
    color:#fff;
}

.menu ul li ul{
    display:none;
    background:#78a802;
    position:absolute;
    width:200px;
    color:#fff;
    margin-top:95px;
}

.menu ul li:hover ul{
    display:block;
    padding:15px;
    line-height:30px;
}

.menu ul li a:hover{
    color:#fff;
}

任何帮助将不胜感激！

Answer 1

添加这个

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

DEMO

---

对于文字BG颜色，需要在文字周围再添加一个标签

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

DEMO 2 UPDATED

Answer 2

在 CSS 中添加以下属性：

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

更新Fiddle link。