html - 为每个下拉菜单分配不同的背景颜色以 Bootstrap 导航栏

Question

我想为每个下拉菜单分配不同的背景颜色以使用 css Bootstrap 导航栏。

.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 属性。要覆盖默认的 Bootstrap CSS，您必须将 "!important" 附加到属性以确保应用它。

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

我根据您提供的代码创建了一个示例: https://jsfiddle.net/fxjrp1n7/1/