Bootstrap navbar dropdown style

Question

How can i change the marked colors of the dropbar on a navbar? I used a navbar generator, but it is have a bug and don't generate the mentioned css codes for the desired colors. Here is the picture:

Here is my current css overrides:

.dropdown-menu { background-color: #3E968A}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus, .dropdown-menu > .active > a:hover { background-color: #42CBAD}
.dropdown-menu>li>a { color: #EEF9FA}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { color: #1D2C43}
.navbar-inverse .navbar-nav>.dropdown>a .caret { border-top-color: #1D2C43}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret, .dropdown-menu > .active > a { border-top-color: #486972}
.navbar-inverse .navbar-nav>.dropdown>a .caret { border-bottom-color: #1D2C43}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-bottom-color: #486972}
.navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus { color: #EEF9FA}

Answer 1

This is what it looks like you're trying to do and if not it should help you apply the styling you want to the navbar.

You should also checkout this post > Change navbar color in Twitter Bootstrap 3 and this link (TWBSColor) referenced inside the post

See working Snippet.

.navbar.navbar-inverse {
  background-color: #3e968a;
}
.navbar.navbar-inverse .navbar-nav > li > a {
  background-color: #3e968a;
  color: #1d2c43;
}
.navbar.navbar-inverse .navbar-nav > li > a:hover {
  color: #42cbad;
}
.navbar.navbar-inverse .navbar-nav > .active,
.navbar.navbar-inverse .navbar-nav > .active > a,
.navbar.navbar-inverse .navbar-nav > .active > a:hover,
.navbar.navbar-inverse .navbar-nav > .active > a:focus {
  background-color: #486972;
  color: #eef9fa;
}
.navbar.navbar-inverse .dropdown-menu {
  background-color: #3e968a;
}
.navbar.navbar-inverse .dropdown-menu > li > a {
  color: #eef9fa;
}
.navbar.navbar-inverse .dropdown-menu > li > a:hover,
.navbar.navbar-inverse .dropdown-menu>li>a:focus {
  background-color: #42cbad;
  color: #1d2c43;
}
.navbar.navbar-inverse .navbar-nav li.dropdown.open > .dropdown-toggle,
.navbar.navbar-inverse .navbar-nav li.dropdown.active > .dropdown-toggle,
.navbar.navbar-inverse .navbar-nav li.dropdown.open.active > .dropdown-toggle {
  background: #486972;
  color: #eef9fa;
}
.navbar.navbar-inverse .navbar-nav>.dropdown>a:hover .caret {
  border-bottom-color: #486972;
}
.navbar.navbar-inverse .navbar-brand {
  color: #1d2c43;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-static-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button> <a class="navbar-brand" href="#">Brand</a>

    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a>

        </li>
        <li><a href="#">Link</a>

        </li>
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>

          <ul class="dropdown-menu">
            <li><a href="#">Action</a>

            </li>
            <li><a href="#">Another action</a>

            </li>
            <li><a href="#">Something else here</a>

            </li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a>

            </li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a>

            </li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a>

        </li>
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>

          <ul class="dropdown-menu">
            <li><a href="#">Action</a>

            </li>
            <li><a href="#">Another action</a>

            </li>
            <li><a href="#">Something else here</a>

            </li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a>

            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>