ブートストラップドロップダウンCSSクリックカラー

Question

What my dropdown looks likeクリックすると白くなります。

Like this.背景は白で、白いテキストを読むことができるように薄い青色である必要があります。

私は、ドロップダウンや白抜きの.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> 

そのようなことになって、しかし、あなたが持っている場合

@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()値を変更します。下の[スニペットを実行]をクリックした後に[フルページ]をクリックする必要がある場合があります。そうしないと、「スモールビューポート」ブートストラップメディアクエリが実行され、メニューの外観が変更される可能性があります。

/* 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

わからないCSS：あそこ

<li class="dropwdown">

を、そしてあなたの避難所」どんな「ドロップダウン」クラス：