引导navbar背景颜色的下拉菜单项 [英] Bootstrap navbar background colour of dropdown menu item

问题描述

如何在点击下拉菜单时更改下拉菜单的背景颜色？

How do I change the background colour of a drop-down item when it is clicked?

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

I'm using a navbar and 1 of the items, "SERVICES", is a dropdown. When on a page other than "SERVICES", clicking on the dropdown will show a grey background for that item. How do I target this item in css to change the background colour to something else?

我使用导航栏和从bootstrap 3.3.2下拉菜单。

I'm using the navbar and dropdown from bootstrap 3.3.2.

这是一个小提琴： http://jsfiddle.net/7jLm8btr/1/

这是navbar的html：

Here's the html for the navbar:

    <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应用于此规则：

apply your css to this rule :

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

现场演示

Live Demo

这篇关于引导navbar背景颜色的下拉菜单项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！