html - CSS のホバー画像が機能しない

Question

http://www.elitedeafpoker.com/dev/index.htmlのnavbarで、(クラス) サブメニュー エリアにカーソルを合わせると、"PLAYERS" の下に小さな灰色のインジケーター アイコンがあり、白いインジケーター アイコンが表示されません。 . http://www.elitedeafpoker.com/dev/img/indicator-hover.pngは、1 つの画像に 2 つのアイコンが表示されている画像です (白いアイコンは表示されません)。

CSS

.nav-collapse_ .nav > li.sub-menu:after {
  position: absolute;
  top: 100px;
  left: 50%;
  display: block;
  margin-left: -4px;
  width: 8px;
  height: 3px;
  background: url(../img/indicator-hover.png) 0 0;
  content: '';
}
.nav-collapse_ .nav > li.sub-menu:hover {
  background: url(../img/indicator-hover.png) 0 -10px;
  }

HTML

<div class="nav-collapse nav-collapse_ collapse">
    <ul class="nav sf-menu clearfix">
        <li class="sub-menu"><a href="poker-players.html">PLAYERS</a>
            <ul>
                <li><a href="poker-players.html">EDPS PLAYERS</a></li>
                <li><a href="poker-players.html#">PLAYERS OF THE MONTH</a></li>
                <li><a href="poker-players.html#">PLAYERS OF THE YEAR</a></li>
            </ul>
    </li>
        <li><a href="shop.html">SHOP</a></li>
        <li><a href="news-events.html">NEWS &amp; EVENTS</a></li>
    <li><a href="founders.html">FOUNDERS</a></li>
    <li><a href="contactus.html">CONTACT US</a></li>
    </ul>
</div>