Q:

Drop down menu hover state

I'm working on a drop down menu and have run in to a spot of bother getting the hover effect to work the way I intended. When I hover over an image I want the drop down action to take place, this is working fine. But I also want the text below the image to act like a tab connecting the text and the drop down menu. 
I have put together this jsfiddle example to give a rough idea.So when I hover over the button the background of the 'HOVER' text should turn green. but it only turns green when I hover directly over the text, I would like it to run the hover effect when I hover over the actual button. I hope this makes sense?
heres the 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>

And the 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;
}

Any help would be much appreciated!

A:

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

DEMO

For text BG color, you need to add another tag around the text
li:hover span{  background-color:#78a802; color:green; display:block} 
li:hover div{  background-position: -5px -120px; color:green}

DEMO 2 UPDATED

