Bootstrap Dropdown CSS點擊顏色

Question

What my dropdown looks like當我點擊它變成白色。

Like this.背景是白色的，應該是一個較淺的藍色陰影，使得白色文本可讀。

我試着用任何包含下拉式或帶有白色的.open到不同的CSS來更新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; 
    } 
} 

Answer 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>

Answer 2

不知道它應該是這樣的，但是你有一個：

<li class="dropwdown">

在那裏，而你的天堂」 t任何「下降」類:)