html - li.hover で色が変わらない

Question

これが私のhtmlです

    <div class="pure-u" id="menu" data-ng-controller="gotoUrl">
            <div class="pure-menu pure-menu-open">
                <a class="pure-menu-heading"
                   href="#">PennyTracker</a>
                <ul>
                    <!-- Add Transaction Button -->
                    <li>
                        <button
                                class="pure-button pure-button-success pure-button-large"
                                data-ng-click="setRoute('new')">
                            <i class="icon-plus"></i>
                            Transaction
                        </button>
                    </li>
                  ......
     </div>

そして、ここにカーソルを合わせたときに色を変更しようとするcssがありますli

.pure-menu li.hover {
    background: red;
    color: #000000;
}

でも、ホワリ​​ングしても赤い色は見えません。

私が間違っていることは何ですか？