Question

我有一个使用bootstrap的导航栏菜单。一个选项是下拉列表。单击此选项时，会出现灰色背景颜色。如何使用CSS覆盖它？

<nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class ="navbar-tggle collapsed" data-toggle="collapse" data-target="#collapsedNav">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="index.php" style="color: #bcc6cc;" class="navbar-brand"><img src="images/logo.png" alt="Tampa Bay Developers" id="tbdLogo">Tampa Bay Developers</a>
            </div>
            <div class="collapse navbar-collapse" id="collapsedNav">
                <ul class="nav navbar-nav">
                    <li class="active2"><a href="#">Products</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Support</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">About<span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Articles</a></li>
                            <li><a href="#">Related Sites</a></li>
                        </ul>
                    </li>
                </ul>                   
                <button type="button" class="btn btn-default navbar-btn navbar-right">Contact Us</button>
            </div>
        </div>
    </nav>

Answer 1

CSS：

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

Bootstrap下拉切换类 - 当选项处于活动状态时更改背景颜色

1 个答案: