列表中锚定的CSS背景，可以'；因为图像子弹，所以不能拉伸覆盖整个li

我有一个三层的下拉菜单。其中一个链接的“悬停时背景色”设置为锚定标记。包含列表标记包含用作项目符号的背景图像

我需要一个锚标签（服务）之一的背景色。。如果我尝试：

.pages_nav li a.services:hover {
    background-color: #00A99D;
}

它不起作用。。但这是：

.pages_nav li.services:hover {
    background-color: #00A99D;
}

工作。然而，背景一直延伸到图像子弹，这是我不想要的

有什么建议吗

html：

<div id="pages_nav">
    <ul class="pages_nav">
        <li class="home"><a class="home" href="/home">Home</a></li>
        <li class="about"><a class="about" href="/about">About Us</a></li>
        <li class="services"><a class="services" href="/services">Our Services</a>
        <ul>
            <li class="procure"><a class="procure" href="/procure">PROCURE TO PAY (P2P)</a></li>
            <li class="cash"><a class="cash" href="/cash">ORDER TO CASH (02C)</a></li>
            <li class="general"><a class="general" href="/general">GENERAL ACCOUNTING</a>
            <ul>
                <li class="charting"><a class="charting" href="/charting">Charting of Accounts</a></li>
                <li class="maintenance"><a class="maintenance" href="/maintenance">General Ledger Maintenance</a></li>
                <li class="receivable"><a class="receivable" href="/receivable">Accounts Receivable Services</a></li>
                <li class="payable"><a class="payable" href="/payable">Accounts Payable Services</a></li>
                <li class="reconciliation"><a class="reconciliation" href="/reconciliation">Reconciliation of Bank Accounts and Credit Cards</a></li>
                <li class="statements"><a class="statements" href="/statements">Preparing Financial Statements</a></li>
                <li class="payroll"><a class="payroll" href="/payroll">Payroll Processing</a></li>
            </ul>
            <div class="clear"></div>
            <li class="closing"><a class="closing" href="/closing">CLOSING & REPORTING</a></li>
        </ul>
        <div class="clear"></div>
        <li class="how-it-works"><a class="how-it-works" href="/how-it-works">How It Works</a></li>
        <li class="contact"><a class="contact" href="/contact">Contact Us</a></li>
        <li class="careers"><a class="careers" href="/careers">Careers</a></li>
    </ul>
    <div class="clear"></div>
</div>

那么：

.pages_nav li.services:hover a {
    background-color: #00A99D;
}

.pages_nav li.services:hover a {
    background-color: #00A99D;
}