html - 下拉菜单悬停状态

Question

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

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

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

---

对于文本背景颜色，您需要在文本周围添加另一个标签

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

DEMO 2 UPDATED