title: How to change the color of an active dropdown in a navbar
body: <p>When I click on the dropdown menu this is always highlighted in blue. How can I fix this with Bootstrap or a change of my CSS?</p>
  
  <p>With this CSS element I already tried to change the color:</p>
  
  <pre><code>.dropdown-item.active, .dropdown-item:active
   color: red
   background-color: darkviolet
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;nav class="nav-justified navbar-expand-xl navbar-light"&gt;
          &lt;div class="" id="navbarSupportedContent"&gt;
            &lt;ul class="navbar-nav mr-auto nav-pills nav-fill"&gt;
              &lt;li class="nav-item active"&gt;
                &lt;a class="nav-link" href="home.html"&gt;Home&lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                &lt;a class="nav-link" href="überuns.html"&gt;Über uns&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                &lt;a class="nav-link" href="Konakt.html"&gt;Kontakt&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item dropdown dropdown"&gt;
                &lt;a class="nav-link dropdown-toggle" href="Maschinen.html" 
  id="navbarDropdown" role="button" data-toggle="dropdown" aria- 
  haspopup="true" aria-expanded="false"&gt;
                    Dropdown
                &lt;/a&gt;
                &lt;div class="dropdown-menu" aria- 
  enter code herelabelledby="navbarDropdown"&gt;
                  &lt;a class="dropdown-item" href="1.html"&gt;Element 1&lt;/a&gt;
                  &lt;a class="dropdown-item" href="2.html"&gt;Element 2&lt;/a&gt;
                  &lt;a class="dropdown-item" href="3.html"&gt;Element 3&lt;/a&gt;
                  &lt;a class="dropdown-item" href="4.html"&gt;Element 4&lt;/a&gt;
                  &lt;a class="dropdown-item" href="5.html"&gt;Element 5&lt;/a&gt;
                  &lt;a class="dropdown-item" href="6.html"&gt;Element 6&lt;/a&gt;
                &lt;/div&gt;
  </code></pre>