Bootstrap Dropdown CSS Cliqué couleur

Question

What my dropdown looks like lorsque je clique dessus devient blanc.

Like this. L'arrière-plan est blanc et doit être d'une nuance de bleu plus claire pour que le texte blanc soit lisible.

J'ai essayé de mettre à jour le CSS avec tout ce qui contient dropdown ou .open avec une couleur blanche à un autre. Pas de chance.

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

Le 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

Comme d'autres l'ont noté, le CSS que vous avez cité ne correspond pas à la coloration bleue montrée dans l'image d'exemple. J'ai essayé de reproduire ce (voir les notes dans le CSS ci-dessous), mais je pense que la règle de style que vous êtes après est:

.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); 
} 

De toute évidence, changer la valeur rgba() pour correspondre à votre couleur préférée. Notez que vous devrez peut-être cliquer sur "Full page" après avoir cliqué sur "Run snippet" ci-dessous, sinon la requête média Bootstrap "small viewport" est susceptible de lancer et modifier l'apparence du menu.

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

Je ne sais pas s'il est censé être comme ça, mais vous avez:

<li class="dropwdown">

là-bas, et vous n » t toute classe "dropwdown" :)