How to change background colour of opened bootstrap dropdown list - Bootstrap 4

Question

How to change background colour of opened bootstrap dropdown option. Here is the code:

<nav class="navbar navbar-toggleable-sm navbar-inverse bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar6">
        <span class="navbar-toggler-icon"></span>
    </button>
  <a href="#" class="navbar-brand">Title </a>
  <div class="navbar-collapse collapse justify-content-stretch" id="navbar6">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">About<span class="sr-only">Home</span></a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Services
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Design</a>
          <a class="dropdown-item" href="#">Development</a>
          <a class="dropdown-item" href="#">Consulting</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

In bootstrap 3 I changed it with the help of:

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav > .open > a:hover {
  background: #080808;
}

It was a standard code of bootstrap 3 (not work in bootstrap4)
how do I do the same thing only in bootstrap 4?

Solution 1

.navbar .dropdown-menu {
  background-color: #BADA55;
}

/* and this styles the dropdwon trigger link, when open */
.navbar .dropdown.show a { 
  background-color: #BADA55;
}

...is enough.

Note .navbar limits it to menu and without it, it would style all .dropdowns, as long as you load your CSS after bootstrap(.min).css.

.navbar .dropdown-menu {
  background-color: #BADA55;
}
.navbar .dropdown.show a {
  background-color: #BADA55;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

<nav class="navbar navbar-toggleable-sm navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Title</a>

  <div class="collapse navbar-collapse justify-content-stretch" id="navbarSupportedContent">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
       <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Services
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
      <a class="dropdown-item" href="#">Design</a>
      <a class="dropdown-item" href="#">Development</a>
      <a class="dropdown-item" href="#">Consulting</a>
    </div>
  </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Please note none of your current selectors match anything, since you don't seem to have applied navbar-default class to any element.

As a general rule, expect many class names to have been refactored in v4, which allows shorter, more expressive syntax and greater overall flexibility.
Applying v3 solutions to v4 examples is generally regarded as bad practice, just like expecting v2 solutions to work on v3 examples.

Solution 2

This works for Bootstrap 4.1.3:

.dropdown-menu {
    background-color: #ff0000;
}