CSS中的悬停图像不起作用

Question

在导航栏上的http://www.elitedeafpoker.com/dev/index.html 上，当我将鼠标悬停在（类）子菜单区域时，“PLAYERS”下方有一个灰色的小指示图标，它不会显示白色指示图标。 http://www.elitedeafpoker.com/dev/img/indicator-hover.png 是一张图片，在一张图片中显示了两个图标（你看不到那里的白色图标）。

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>

Answer 1

我相信你的

.nav-collapse_ .nav > li.sub-menu:hover

应该改为

.nav-collapse_ .nav > li.sub-menu:hover:after

解决这个问题