Bootstrap 下拉菜单项的导航栏背景颜色

Question

单击下拉项时如何更改其背景颜色？

我正在使用导航栏，其中一项 "SERVICES" 是下拉菜单。当在 "SERVICES" 以外的页面上时，单击下拉菜单将显示该项目的灰色背景。如何在 css 中定位此项目以将背景颜色更改为其他颜色？

我正在使用 bootstrap 3.3.2 的导航栏和下拉菜单。

这里是 fiddle：http://jsfiddle.net/7jLm8btr/1/

这是导航栏的 html：

    <div class="navbar navbar-default navbar-static-top">
        <div class="container-fluid">
            <div class="navbar-header">

                <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <a class="navbar-brand" href="#"><img class="ManeEventLogo" src="/img/logos/ManeEventBrown.png"></a>
            </div>

            <div class="collapse navbar-collapse navbar-responsive-collapse">

                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="/index.php">HOME</a>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">SERVICES <span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="/services/cutting-styling/index.php">Cutting & Styling</a></li>
                                <li><a href="/services/coloring/index.php">Coloring</a></li>                                
                                <li><a href="/services/hair-straightening-relaxing/index.php">Permanent Hair Straightening & Relaxing</a></li>
                                <li><a href="/services/balmain-hair-extensions/index.php">Balmain Hair Extensions</a></li>
                            </ul>
                    </li>
                    <li>
                        <a href="/wedding-day/index.php">WEDDING DAY</a>
                    </li>
                    <li>
                        <a href="/expertise-team/index.php">THE EXPERTISE TEAM</a>
                    </li>
                    <li>
                        <a href="/photo-gallery/index.php">PHOTO GALLERY</a>
                    </li>
                    <li>
                        <a href="/blog/index.php">BLOG</a>
                    </li>
                </ul>

            </div>
        </div>
    </div>

Answer 1

将您的 css 应用于此规则：

    .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
    background: black;
}

Live Demo

Bootstrap 下拉菜单项的导航栏背景颜色

Bootstrap navbar background colour of dropdown menu item

html

css

twitter-bootstrap

twitter-bootstrap-3