Question

单击下拉项目时，如何更改下拉项目的背景颜色？

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

Dropdown Menu Item Grey

我正在使用导航栏和bootstrap 3.3.2的下拉列表。

这是导航栏的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导航栏背景颜色

1 个答案: