Trouble applying CSS to a li - ultimate specificity fails - html

Question

I'm having trouble applying a CSS style to a li. Surely the problem cannot be specificity but I don't know how to select the li's - I just want to be able to style these li's white and apply hover effects that are the same as the brand title.
Any ideas on where I'm going wrong?
/* MAKES HEADER NAVBAR NO WIDER THAN 960PX */
.width-960px { max-width: 960px; }
.no-padding-unless-mobile {
padding: 0;
}
.navbar {
margin-bottom: 50px;
background: #3C7AAD;
}
.navbar-header .navbar-brand {
color: #fff;
}
.navbar-header .navbar-brand:hover {
color: #D5D5D5;
}
/* I can't be any more specific than this... */
.navbar .navbar-default .navbar-static-top .container .width-960px .no-padding-unless-mobile .collapse .navbar-collapse .navHeaderCollapse .nav .navbar-nav .navbar-right ul li a {
color: #fff;
}
<header class="navbar navbar-default navbar-static-top">
<div class="container width-960px no-padding-unless-mobile">
<div class="navbar-header">
Brand Name
<!-- MOBILE BUTTON - VIEWABLE ON MOBILE SIZED BROWSERS ONLY -->
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<!-- HAMBURGER MENU -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<nav class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li>Link 1</li>
<!--<li>NEWS</li>-->
<li>Link 2</li>
<li>Link 3</li>
</ul>
</nav>
</div>
</header>

Answer 1

.navbar-right is already the ul ... only use like below
you could also use ul.navbar-right to select it. But i think you got the problem.
/* MAKES HEADER NAVBAR NO WIDER THAN 960PX */
.width-960px { max-width: 960px; }
.no-padding-unless-mobile {
padding: 0;
}
.navbar {
margin-bottom: 50px;
background: #3C7AAD;
}
.navbar-header .navbar-brand {
color: #fff;
}
.navbar-header .navbar-brand:hover {
color: #D5D5D5;
}
/* I can't be any more specific than this... */
.navbar-right li a {
color: #fff !important;
}
<header class="navbar navbar-default navbar-static-top">
<div class="container width-960px no-padding-unless-mobile">
<div class="navbar-header">
Brand Name
<!-- MOBILE BUTTON - VIEWABLE ON MOBILE SIZED BROWSERS ONLY -->
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<!-- HAMBURGER MENU -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<nav class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li>Link 1</li>
<!--<li>NEWS</li>-->
<li>Link 2</li>
<li>Link 3</li>
</ul>
</nav>
</div>
</header>

Answer 2

Replace this:
.navbar .navbar-default .navbar-static-top .container .width-960px .no-padding-unless-mobile .collapse .navbar-collapse .navHeaderCollapse .nav .navbar-nav .navbar-right ul li a {
color: #fff;
}
With this:
.nav li a {
color: #fff;
}
.nav li a:hover {
color: #D5D5D5;
}

Answer 3

You need to add this
.navbar-default .navbar-nav>li>a{ color:#fff !important;}
.navbar-default .navbar-nav>li>a:hover { background:#fff !important; color:#333 !important;}
.width-960px { max-width: 960px; }
.no-padding-unless-mobile {
padding: 0;
}
.navbar {
margin-bottom: 50px;
background: #3C7AAD;
}
.navbar-header .navbar-brand {
color: #fff;
}
.navbar-header .navbar-brand:hover {
color: #D5D5D5;
}
/* I can't be any more specific than this... */
.navbar .navbar-default .navbar-static-top .container .width-960px .no-padding-unless-mobile .collapse .navbar-collapse .navHeaderCollapse .nav .navbar-nav .navbar-right ul li a {
color: #fff;
}
.navbar-default .navbar-nav>li>a{ color:#fff !important;}
.navbar-default .navbar-nav>li>a:hover { background:#fff !important; color:#333 !important;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<header class="navbar navbar-default navbar-static-top">
<div class="container width-960px no-padding-unless-mobile">
<div class="navbar-header">
Brand Name
<!-- MOBILE BUTTON - VIEWABLE ON MOBILE SIZED BROWSERS ONLY -->
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<!-- HAMBURGER MENU -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<nav class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li>Link 1</li>
<!--<li>NEWS</li>-->
<li>Link 2</li>
<li>Link 3</li>
</ul>
</nav>
</div>
</header>