Html 引导切换下拉菜单而不激活菜单项

我有以下HTML代码：

<nav class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid black-back">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">Judicial Workbench</a>
            </div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Calendar</a></li>
                <li><a href="#">Min/Mandatory Chart</a></li>
            </ul>
            <div class="pull-right white">
                <span>Welcome, Judge Mathis!</span>
                <ul class="nav navbar-nav navbar-right white">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-search search"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li>
                                <form class="navbar-form navbar-left" role="search">
                                    <div class="form-group">
                                        <input type="text" class="form-control" placeholder="Search">
                                    </div>
                                    <button type="submit" class="btn btn-default btn-block submitBtn">Submit</button>
                                </form>
                            </li>
                        </ul>
                    </li>
                </ul>
                <a href="#"><span class="glyphicon glyphicon-cog white settings"></span></a>
            </div>
        </div>
    </nav>

欢迎你，马蒂斯法官！




提交

这试图实现的是，当用户单击搜索图标时，一个小的搜索表单会下拉。除了我的代码将搜索图标设置为acive菜单项之外，所有这些都可以正常工作

我想要的是，它只是下拉搜索框，而不是改变活动的菜单项

---

上面的JSFIDLE似乎工作正常，我不知道为什么，因为它是我的实际代码的复制/粘贴，您可以在上面的屏幕广播中看到它正在运行。有没有关于如何进行此操作的想法？

当您单击该按钮时，它会自动将类

open

添加到其中，该类具有另一种背景色。要保留默认值，可以将其添加到CSS中：

.open a {
   background: initial !important;
}

---

您只想保留搜索框的背景色，对吗？