title: Remove hover background dropdown bootstrap 4
body: <pre><code>&lt;li class="nav-item active dropdown"&gt;
          &lt;a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
            Dropdown link
          &lt;/a&gt;
          &lt;div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"&gt;
            &lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;
            &lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;
            &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
          &lt;/div&gt;
        &lt;/li&gt;
  </code></pre>
  
  <p>I've wrote this code to create a dropdown with bootstrap (very easy) now I'm trying to remove the background when I hover over the item inside the dropdown but somehow they always stay white. </p>
  
  <p>This is the css </p>
  
  <pre><code>.dropdown-menu{
    background-color: transparent;
    border: transparent;
    border: none;
  }
  .dropdown-menu .dropdown-item &gt; li &gt; a:hover {
    background-image: none;
    background-color: #000;
  }
  </code></pre>