菜單折疊后如何更改Bootstrap Navbar下拉菜單列表項的背景顏色和文本顏色

Question

Bootstrap新手並創建基本導航欄。 我希望我需要的東西有意義。 簡而言之，我需要下拉菜單中列表項的背景顏色和文本顏色，以便在它們崩潰之前和之后匹配。 我似乎找不到合適的CSS屬性進行編輯，而我嘗試過的許多組合都無法解決我的問題。 類似的問題並沒有解決我的問題，但也許值得為其他人尋找。

下面是菜單崩潰前的樣子。 每個<li>都有一個鏈接或<a> ，在其中（參見下面的基本HTML）。 文本顏色為黑色，背景顏色為白色。 當項目懸停時， <li>的背景變為棕褐色。 菜單折疊后我想要相同的顏色：

折疊后，它看起來像這樣：

折疊后，顏色似乎會變回Bootstrap的默認值。 我希望Sub 1和Sub 3的文本默認情況下是黑色的，帶有白色背景，同時在標題Stuff 2后面保持相同的顏色。 單擊或懸停時顏色似乎正常（棕色背景為黑色字體）。

以下是一些相關的HTML和CSS。 我知道其中有些雜亂（並且使用!important;通常被認為是不良形式），但是我希望那里的人可以幫助我識別代碼塊，以便我可以使其正常工作，然后集中精力清理它起來。

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

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

我建議使用媒體查詢並添加您想要調整的類。 例如：

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

對於Bootstrap 3默認媒體查詢，您可以在這里找到它

Answer 2

經過一些試驗，這樣做：

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

Answer 3

我認為您必須更改此顏色：

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