What my dropdown looks like当我点击它时会变为白色。
Like this.背景为白色，应该是浅蓝色，白色文字可读。
我尝试使用包含dropdown的任何内容或使用白色的.open更新CSS到另一个。没有运气。
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" runat="server" href="~/">
<span class="icon-bar">
<asp:Image ID="logo" runat="server" Height="30px" ImageUrl="" Width="35px" />
</span>DT</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a runat="server" href="">Search</a></li>
<li><a runat="server" href="">Reporting</a></li>
<li><a runat="server" href="~/Help">Help</a></li>
<li class="dropwdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Views<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a runat="server" href="">Funnel Mgmt</a></li>
<li><a runat="server" href="">Global Deal</a></li>
<li><a runat="server" href="">Regional Deal</a></li>
</ul>
</li>
<li><a runat="server" href="">Admin</a></li>
<li><a runat="server" href="">Resources</a></li>
</ul>
</div>
</div>
</div>
CSS
@media (max-width: 767px) {
.navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header {
border-color: #080808;
}
.navbar-inverse .navbar-nav .open .dropdown-menu .divider {
background-color: #080808;
}
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
color: #9d9d9d;
}
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
color: #ffffff;
background-color: transparent;
}
.navbar-inverse .navbar-nav .open .dropdown-menu > .active > a,
.navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #ffffff;
background-color: #080808;
}
.navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a,
.navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:focus {
color: #444444;
background-color: transparent;
}
}
答案 0 :(得分：1)
不确定它是否应该是那样，但你有一个：
<li class="dropwdown">
在那边，你没有任何“dropwdown”课程:)
答案 1 :(得分：1)
正如其他人所说，您引用的CSS与示例图像中显示的蓝色不匹配。我试图重现这一点（参见下面的CSS中的注释），但我认为你所遵循的风格规则是：
.navbar-inverse .navbar-nav>.open>a,
.navbar-inverse .navbar-nav>.open>a:focus,
.navbar-inverse .navbar-nav>.open>a:hover {
background-color: rgba(74, 201, 255, 1);
}
显然，更改rgba()值以匹配您的首选颜色。请注意，您可能需要在点击下面的“运行代码段”后点击“完整页面”，否则“小视口”Bootstrap媒体查询可能会启动并改变菜单外观。
/* only required to reproduce blue background for the demo */
.navbar-inverse {
background-color: rgba(0, 150, 214, 1) !important;
margin-top: 4em; /* additional spacing to avoid StackOverflow menu bar in 'full page' view */
}
/* only required to reproduce white text for the demo */
.navbar-inverse .navbar-brand,
.navbar-inverse .navbar-nav>li>a {
color: #fff !important;
}
/* ensure background colour for open dropdown menu is a lighter blue colour */
.navbar-inverse .navbar-nav>.open>a,
.navbar-inverse .navbar-nav>.open>a:focus,
.navbar-inverse .navbar-nav>.open>a:hover {
/* white text */
color: #fff;
/* NB: '!important' is only required for the demo,
due to the order in which CSS rules are applied.
You should be able to update this to the following
which should still work:
background-color: rgba(74, 201, 255, 1);
*/
background-color: rgba(74, 201, 255, 1) !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" runat="server" href="~/">
<span class="icon-bar">
<asp:Image ID="logo" runat="server" Height="30px" ImageUrl="" Width="35px" />
</span>DT</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a runat="server" href="">Search</a></li>
<li><a runat="server" href="">Reporting</a></li>
<li><a runat="server" href="~/Help">Help</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Views<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a runat="server" href="">Funnel Mgmt</a></li>
<li><a runat="server" href="">Global Deal</a></li>
<li><a runat="server" href="">Regional Deal</a></li>
</ul>
</li>
<li><a runat="server" href="">Admin</a></li>
<li><a runat="server" href="">Resources</a></li>
</ul>
</div>
</div>
</div>