0

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

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

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

它不起作用..但是这个：

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

作品。但是，背景一直延伸到图像项目符号，这是我不想要的。

有什么建议么？http://jsfiddle.net/PDYrU/

的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>

CSS：

.pages_nav {
    position: relative;
    list-style-type: none;
    margin: 55px 0;
    padding: 0;
}

    .pages_nav li {
        float: left;
    }

        .pages_nav a {
            text-decoration: none;
            display: block;
            padding: 0 5px;
            color: #4D4D4D;
        }

        .pages_nav li a:hover { color: #FFF; font-family: fsalbert-bold; }
        .pages_nav li a.current { color: #FFF; font-family: fsalbert-bold; }

        .pages_nav li.home { width: 65px; }
        .pages_nav li a.home:hover { color: #20368B; }
        .pages_nav li a.home.current { color: #20368B; }
        .pages_nav li.about { width: 80px; background: url('../../assets/brand/bullet_about.png') center left no-repeat; padding-left: 10px; }
        .pages_nav li a.about:hover { color: #F7931E; }
        .pages_nav li a.about.current { color: #F7931E; }
        .pages_nav li.services { width: 100px; background: url('../../assets/brand/bullet_services.png') center left no-repeat; padding-left: 10px; }
        .pages_nav li a.services:hover { background-color: #00A99D; }
        .pages_nav li a.services.current { background-color: #00A99D; }
        .pages_nav li.how-it-works { width: 110px; background: url('../../assets/brand/bullet_works.png') center left no-repeat; padding-left: 10px; }
        .pages_nav li a.how-it-works:hover { color: #0071BC; }
        .pages_nav li a.how-it-works.current { color: #0071BC; }
        .pages_nav li.contact { width: 85px; background: url('../../assets/brand/bullet_contact.png') center left no-repeat; padding-left: 10px; }
        .pages_nav li a.contact:hover { color: #20368B; }
        .pages_nav li a.contact.current { color: #20368B; }
        .pages_nav li.careers { width: 65px; background: url('../../assets/brand/bullet_careers.png') center left no-repeat; padding-left: 10px; }
        .pages_nav li a.careers:hover { color: #F7931E; }
        .pages_nav li a.careers.current { color: #F7931E; }

            .pages_nav ul {
                position: absolute;
                list-style-type: none;
                display: none;
                width: 200px;
                margin: 0;
                padding: 20px 0 10px 2px;
                background-color: #00A99D;
            }

                .pages_nav ul li {
                    padding: 2px 0;
                    width: 100%;
                }

                .pages_nav ul a {
                    float: left;
                    color: #FFF;
                }

                .pages_nav ul a.general {
                    background: url('../../assets/brand/arrow.png') center right no-repeat;
                    padding-right: 10px;
                }

                    .pages_nav li ul ul {
                        left: 200px;
                        margin: -8px 0 0 0;
                        padding: 5px 5px;
                        width: 190px;
                    }

                    .pages_nav ul ul a {
                        background: url('../../assets/brand/bullet_white.png') center left no-repeat;
                        padding-left: 10px;
                    }

                    .pages_nav li:hover ul ul {
                        display: none;
                    }

                    .pages_nav li:hover ul, .pages_nav li li:hover ul {
                        display: block;
                    }
4

1 回答 1

1

怎么样：

.pages_nav li.services:hover a {
    background-color: #00A99D;
}
于 2013-02-16T22:05:26.850 回答