Bootstrap header colours

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<header>
<div class="container">
  <nav class="navbar fixed-top">
    <div class="container-fluid">
      <ul class="nav navbar-nav">
        <li><a href="#">Foo</a></li>
        <li><a href="#">Foo</a></li>
        <li class="active"><a href="#">Foo</a></li>
        <li><a href="#">Foo</a></li>
        
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </nav>
</div>
</header>

CSS

html {
    background-color: rgb(80, 115, 130);
}

header {
    padding-bottom: 20px;
}

body {
    background-color: inherit !important;
}

.navbar {
    margin: 0 !important;
    background-color: rgb(0, 90, 105) !important;
    border-color: rgb(80, 115, 130) !important;
    min-height: 40px;  
}

.navbar li a {
    color: white;
    padding-top: 7px;
    padding-bottom: 7px;
}

.navbar ul > li.active {
    font-weight: bold;
    border-bottom: 4px solid yellow;
}

.navbar ul > li:hover {
    
    border-bottom: 4px solid red;
}

.navbar ul > li:focus {
    font-weight: bold;
    background-color: rgb(0, 90, 105) !important;
}

/* ADD THE CLASS BELOW */

.nav > li > a:hover{
  background:none;
}