Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

所有这些下拉列表都应该有不同的背景颜色。

Answer 1

要使用类“greentbg”将颜色应用于列表，您必须为该类定义CSS属性。要覆盖默认的引导程序CSS，您必须将“！important”附加到该属性，以确保它已应用。

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

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

Answer 2

您应该可以使用ID。给每个下拉菜单一个不同的ID，然后使用css分别设置每个ID。

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

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

还记得＆＃34;清空缓存和硬重载＆＃34;在对CSS文件进行更改后，它们将对页面产生影响。

Answer 3

也许和李和一起？不确定......

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

为每个下拉列表分配不同的背景颜色以引导导航栏

3 个答案: