So ändern Sie die Hintergrundfarbe und die Textfarbe des Bootstrap-Navbars Dropdown-Menü Elemente nach dem Zusammenklappen des Menüs anzeigen

Question

Neu beim Bootstrap und Erstellen einer einfachen Navigationsleiste. Ich hoffe, dass das, was ich brauche, Sinn macht. Einfach gesagt, brauche ich die Hintergrundfarbe und die Textfarbe der Listenelemente im Dropdown-Menü, um sowohl vor als auch nach dem Zusammenklappen zu entsprechen. Ich kann nicht die richtigen CSS-Attribute zum Bearbeiten finden, und die vielen Kombinationen, die ich versucht habe, lösen mein Problem nicht. A similar question hat mein Problem nicht gelöst, aber vielleicht lohnt es sich, nach anderen zu suchen.

Unten ist, wie das Menü aussieht, bevor es zusammenbricht. Jede <li> hat einen Link, oder <a>, darin (siehe Basic HTML unten). Die Textfarbe ist schwarz und die Hintergrundfarbe ist weiß. Wenn sich der Gegenstand über ihm befindet, wird der Hintergrund von <li> gelb. Ich möchte die gleichen Farben, nachdem das Menü kollabiert:

Nach Zusammenbruch es scheint wie folgt aus:

Die Farben scheinen zurück zu Bootstrap Standardwerte zu ändern, nach einem Zusammenbruch. Ich möchte den Text für Sub 1 und Sub 3 standardmäßig schwarz mit einem weißen Hintergrund sein, während die Farbe hinter der Kopfzeile, Stuff 2, das gleiche. Die Farben scheinen gut zu funktionieren, wenn man darauf klickt oder darüber schwebt (brauner Hintergrund mit schwarzer Schrift).

Unten finden Sie einige der relevanten HTML und CSS. Ich weiß, dass einiges davon chaotisch ist (und dass die Verwendung von !important; oft als schlechte Form betrachtet wird), aber ich hoffe, dass jemand da draußen mir helfen kann, den Block Code zu identifizieren, damit ich ihn funktioniere und mich dann auf die Reinigung konzentrieren kann.

Basic HTML:

<nav class="navbar navbar-inverse"> 
    <div id="navbarbg" class="container-fluid"> 
    <div id="rbgnavbar" class="container">  
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span>       
      </button> 
      <a id="logo" class="pull-left" href="http://www.redbuttegarden.org"><img src="images/logo.png" alt="Red Butte Garden"></a> 
     </div> 

     <div class="collapse navbar-collapse" id="myNavbar"> 

      <ul class="nav navbar-nav"> 

      <li class="dropdown"> 
       <a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="rbgwhitelink">STUFF 1 <span class="caret"></span></span></a> 
       <ul class="dropdown-menu"> 
       </ul> 
      </li> 

      <li class="dropdown"> 
       <a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="rbgwhitelink">STUFF 2 <span class="caret"></span></span></a> 
       <ul class="dropdown-menu"> 
       <li><a href="#">Sub 1</a></li> 
       <li><a href="#">Sub 2</a></li> 
       <li><a href="#">Sub 3</a></li> 
       </ul> 
      </li> 

      <li class="dropdown"> 
       <a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="rbgwhitelink">STUFF 3 <span class="caret"></span></span></a> 
       <ul class="dropdown-menu"> 
       </ul> 
      </li> 
      </ul> 
     </div> 
    </div> 
    </div> 
</nav> 

Grund CSS:

#rbgnavbar a:hover, a, li, .dropdown-menu li:hover { 
    color: #000000; 
} 

.dropdown-menu li:hover { 
    background-color: #F2EDE4; 
    color: #000000; 
} 

/* Main dropdown menu items change cover when selected/clicked */ 
.dropdown-toggle:active, .open .dropdown-toggle, .dropdown:hover { 
    background-color: #196143 !important; 
} 

.dropdown-menu li, .dropdown-menu a { 
    text-align: center; 
    color: #000000; 
} 

.dropdown { 
    font-size: 10px; 
    padding: 0; 
    font-weight: bold; 
} 

#rbgnavbar { 
    max-width: 1400px; 
    margin-left:auto; 
    margin-right:auto; 
    background-color:#00502F; 
} 


.rbgwhitelink { 
    color: #FFFFFF; 
} 

.dropdown ul { 
    padding-top: 0px; 
    padding-bottom: 0px; 
    font-size: 10px; 
    font-weight: bold; 
} 

/* Border thickness and color between dropdown menu li, padding */ 
.dropdown-menu li { 
    border-top: 2px double #D3D3D3; 
    padding-top: 5px; 
    padding-bottom: 5px; 
} 

/* Background color of li in navbar when hovered over */ 
.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a, .dropdown-menu li:hover { 
    background-color: #F2EDE4; 
} 

/* Makes dropdown-menu li links bold*/ 
.dropdown-menu li > a, .dropdown-menu li > a:visited { 
    font-weight: bold; 
} 

Answer 1

Ich schlage vor, Medienabfragen zu verwenden und die Klassen hinzuzufügen, die Sie optimieren möchten. Zum Beispiel:

/* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) { 
    .dropdown-menu>li>a { 
    background-color: #fff; 
    } 
    } 

Für Bootstrap 3 Standard-Media-Abfragen, die Sie es mir gefunden kann here

Answer 2

Ich glaube, Sie diese Farbe ändern müssen:

.dropdown-toggle:active, .open .dropdown-toggle, .dropdown:hover { 
    background-color: #196143 !important; 
} 

Answer 3

Nach einigem Experimentieren, das tat es:

.dropdown-menu li { 
    background-color: #FFFFFF; 
} 

.dropdown-menu li:hover { 
    background-color: #F2EDE4; 
} 

.dropdown-menu li > a:hover { 
    text-decoration: none; 
} 

/* Changes the color of link text <a> after navbar has collapsed for small screen or mobile mode */ 
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a, .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:visited { 
    color: #000000; 
}