Выпадающее меню hover state

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 Обновлено.