html - リストの上にカーソルを置いたときに HTML リンクの色を変更する方法は?

Question

私の HTML5 コードでは、リストを使用してナビゲーション バーにタブを作成しています。

<div id="nav_tabs">
 <ul>
  <a href="Index_V2.html"> 
   <li>
   Home
   </li>
  </a>
  <a href="#media"> 
   <li>
   Media
   </li>
  </a>
  <a href="#agenda"> 
   <li>
   Agenda
   </li>
  </a>
 </ul>
</div>

ユーザーがこれらのタブの 1 つにカーソルを合わせると、背景色とテキストの色が変わります。ただし、リストの [メディア] タブにはドロップダウン メニューを追加しました。そのための HTML は次のとおりです。

<a href="#media"> 
<li>
 Media
 <ul class="submenu">
  <a href="media_music.html"><li>Music</li></a>
  <a href="media_photo.html"><li>Photo</li></a>
  <a href="media_video.html"><li>Video</li></a>
  <a href="media_band.html"><li>Band</li></a>
  <a href="media_interview.html"><li>Interviews</li></a>
  <a href="media_archive.html"><li>Archive</li></a>
 </ul>
</li>

ドロップダウン メニューが機能し、ホバー時に [メディア] タブの背景色が想定どおりに白に変わります。残念ながら、タブの「メディア」テキストは元の色のままです。

これは、色の変更などを処理する CSS です。

nav {
width: auto;
text-transform: uppercase;
background: #ff4e00;
height: 50px;
}
nav a {
color: white;
}
nav ul {
list-style-type: none;
margin: 0 auto;
margin-left: 0px;
}
nav ul li {
height: 35px;
margin: 0px;
padding-top: 15px;
padding-left: 15px;
padding-right: 15px;
float: left;
text-align: center;
color: white;
font-size: 26px;
-webkit-transition: .2s linear;
-moz-transition: .2s linear;
-o-transition: .2s linear;
-webkit-transition: .2s linear;
-moz-transition: .2s linear;
-o-transition: .2s linear;
}
#nav_tabs ul li:hover {
background: white;
color: #ff4e00;
}
.submenu {
position: relative;
width: 10px;
top: 17px;
right: 15px;
padding: 0px;
margin: 0px;
display: none;
background: black;
}
.submenu li {
background: #ff4e00;
width: 150px;
}
li:hover .submenu {
display: block;
}

「メディア」リンクテキストを他のすべてと同じ色に変更しようとしていますが、リンク/リストの順序が異なるため、明らかに同じようには機能しません。私は使用しようとしました：

#nav_tabs ul a:hover {
    color: #ff4e00;
}

ただし、これは、ユーザーがリンク/テキストにカーソルを合わせたときにのみテキストの色を変更します。ユーザーが探しているタブにカーソルを合わせても、テキストの色は変わりません。

ここで JS Bin で問題を再現できました。ユーザーが [メディア] タブにカーソルを合わせると、タブの背景は変わりますが、テキストの色は変わりません。