Overriding Bootstrap dropdown style - css

Question

I'm trying to extend this custom component example http://getbootstrap.com/examples/cover/ by adding appropriate style to dropdown element.
<li class="dropdown masthead-dropdown">
<a class="" data-toggle="dropdown" href="#">Media<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Videos</li>
<li>Pictures</li>
</ul>
</li>
CSS:
.masthead-dropdown{
background-color: transparent !important;
border-color:white !important;}
Custom styles are included after bootstrap.css, but they doesn't work.

Answer 1

Going by the Cover menu list, I used it to guess the part of your code since I don't know what is wrapping the <li>:
<div class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand">Cover</h3>
<nav>
<ul class="nav masthead-nav">
<li class="active">Home</li>
<li>Features</li>
<li><ul class="dropdown">
<button class="dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Media
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Videos</li>
<li>Pictures</li>
</ul>
</ul></li>
</ul>
</nav>
</div>
</div>
Then add to your CSS:
.dropdown-toggle {
background-color: transparent;
border-color: #fff;
border-style: solid;
border-top: none;
border-right: none;
border-left: none;
}
And you can change the dropdown background colors with this:
.dropdown-menu{
background-color: #000;
}
And the links font color:
.dropdown-menu>li>a{
color: #fff;
}
JSFiddle