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

Matt Hall 发表于 Dev

马特·霍尔

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

我正在使用导航栏，其中一项“ SERVICES”是一个下拉列表。在“服务”以外的页面上时，单击下拉列表将显示该项目的灰色背景。如何在CSS中定位此项目以将背景颜色更改为其他颜色？

下拉菜单项灰色

我正在使用引导3.2.3中的导航栏和下拉菜单。

这是一个小提琴：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>

将CSS应用于此规则：

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

现场演示

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。