ブートストラップnav-barの各ドロップダウンに異なる背景色を割り当てます。

Question

cssを使用してnav-barをブートストラップするために、各ドロップダウンに異なる背景色を割り当てたいとします。

.mynavbar .dropdown ul.dropdown-menu:nth-child(1) { 
 
    background-color: #59b057; 
 
} 
 

 
.mynavbar .dropdown ul.dropdown-menu:nth-child(2) { 
 
    background-color: #eb712b; 
 
}

<li class="dropdown"> 
 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">COMPANY</a> 
 
    <ul class="dropdown-menu dropdown-menu-right scrollable-menu"> 
 
    <li><a href="#">ABOUT US</a></li> 
 
    <li><a href="#">DOWNLOAD</a></li> 
 
    <li><a href="#">CERTIFICATION</a></li> 
 
    <li><a href="#">CAREERS</a></li> 
 
    </ul> 
 
</li> 
 
<li class="dropdown"> 
 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">FACILITIES</a> 
 
    <ul class="dropdown-menu dropdown-menu-right scrollable-menu"> 
 
    <li><a href="#">PRODUCTION</a></li> 
 
    <li><a href="#">R&amp;D</a></li> 
 

 
    </ul> 
 
</li>

これらのすべてのドロップダウンは、異なる背景色を持っている必要があります。

Answer 1

"greentbg"のクラスに色を適用するには、そのクラスのCSS属性を定義する必要があります。デフォルトのブートストラップCSSを無効にするには、"！important"を属性に追加して、その属性が確実に適用されるようにする必要があります。たぶん、Liとして https://jsfiddle.net/fxjrp1n7/1/

Answer 2

IDを使用できるはずです。それぞれのドロップダウンメニューに異なるIDを付け、CSSを使用してそれぞれ別々にスタイルを設定します。

<ul id="backgroundcolor1" class="dropdown-menu dropdown-menu-right scrollable-menu"> 

#backgroundcolor1, 
#backgroundcolor1:hover, 
#backgroundcolor1:active { 
    background-color: red; 
} 

また、CSSファイルを変更した後で「空のキャッシュとハードリロード」してページに反映されるようにしてください。

Answer 3

：

.greentbg { 
    background-color: green !important; 
} 

私はあなたが提供したコードに基づいて例を作成しましたか？ わかりません...

.mynavbar .dropdown li.dropdown-menu:nth-child(1) a { background: red; } 
.mynavbar .dropdown li.dropdown-menu:nth-child(2) a { background: yellow; }