bootstrap 3 navbar dropdown-toggle not applies all css style - css

Question

I'm modifing bootstrap 3 navbar and some CSS properties doesn't apply...
I have this navbar HTML:
<nav class="navbar navbar-default">
<div id="navbar-principal" class="container-fluid">
<div id="navbar-colapsado" class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a id="logo" class="navbar-brand" (click)="onClick('Inicio')" [class.active]="'Inicio'===itemSelected" [routerLink]="['/']"><img src="app/img/logo.jpg" alt="Logo"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a [routerLink]="['/link']">Inicio</a></li>
<li role="button" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Info<span class="caret">
</span></a>
<ul class="dropdown-menu">
<li><a [routerLink]="['/linkA']">Mis Compras</a></li>
<li><a [routerLink]="['/linkB']">Mis Facturas</a></li>
<li><a [routerLink]="['/linkC']">Mi Cuenta</a></li>
</ul>
</li>
<li>Other links</li>
<li>Other links</li>
<li>Other links</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
I load bootstrap 3 form CDN and override with this CSS code:
:host .nav.navbar-nav.navbar-right > li.dropdown.open,
.nav.navbar-nav.navbar-right > li.dropdown.open > a,
.nav.navbar-nav.navbar-right > li.dropdown.open > a:hover{
color: yellow;
background-color: rgba(61, 164, 65, 1);
border-color: #999999;
}
My problem is while "color: yellow" is applied, "background-color" is absolutely ignored.
I've inspected computed css in chrome, and seems it is right... but something is overrides my style!
How I must rewrite bootstrap in order to avoid this?

Answer 1

Just Added Parent class in css to override the default css.
In Below example only right navbar was override by css.
.nav.navbar-nav.navbar-right > li.dropdown.open,
.nav.navbar-nav.navbar-right > li.dropdown.open > a,
.nav.navbar-nav.navbar-right > li.dropdown.open > a:hover{
color: yellow;
background: #3da441;
border-color: #999999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<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>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

Answer 2

I finally found the problem!
It was because background-image (included in bootstrap) imposed on background-color.
I've fixed adding this code to the component css file:
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:focus {
background-color: rgba(61, 164, 65, 0.1);
background-image: none;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
background-color: rgba(61, 164, 65, 0.1);
background-image: none;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
background-color: rgba(61, 164, 65, 0.1);
background-image: none;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
background-color: rgba(61, 164, 65, 0.1);
background-image: none;