twitter bootstrap navbar css

Question

My navbar custom css isn't working right For some reason when you hover your mouse over the links it lights up the background instead of just the link. this is what it looks like: http://i.imgur.com/cSa26qK.jpg this is my css code:

.navbar-cloud {
  background-color: #386474;
  border-color: #284855;
}
.navbar-cloud .navbar-brand {
  color: #c1d9e1;
}
.navbar-cloud .navbar-brand:hover, .navbar-cloud .navbar-brand:focus {
  color: #96becd;
}
.navbar-cloud .navbar-text {
  color: #c1d9e1;
}
.navbar-cloud .navbar-nav > li > a {
  color: #c1d9e1;
}
.navbar-cloud .navbar-nav > li > a:hover, .navbar-cloud .navbar-nav > li > a:focus {
  color: #96becd;
}
.navbar-cloud .navbar-nav > .active > a, .navbar-cloud .navbar-nav > .active > a:hover, .navbar-cloud .navbar-nav > .active > a:focus {
  color: #96becd;
  background-color: #284855;
}
.navbar-cloud .navbar-nav > .open > a, .navbar-cloud .navbar-nav > .open > a:hover, .navbar-cloud .navbar-nav > .open > a:focus {
  color: #96becd;
  background-color: #284855;
}
.navbar-cloud .navbar-toggle {
  border-color: #284855;
}
.navbar-cloud .navbar-toggle:hover, .navbar-cloud .navbar-toggle:focus {
  background-color: #284855;
}
.navbar-cloud .navbar-toggle .icon-bar {
  background-color: #c1d9e1;
}
.navbar-cloud .navbar-collapse,
.navbar-cloud .navbar-form {
  border-color: #c1d9e1;
}
.navbar-cloud .navbar-link {
  color: #c1d9e1;
}
.navbar-cloud .navbar-link:hover {
  color: #96becd;
}

@media (max-width: 767px) {
  .navbar-cloud .navbar-nav .open .dropdown-menu > li > a {
    color: #c1d9e1;
  }
  .navbar-cloud .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-cloud .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #96becd;
  }
  .navbar-cloud .navbar-nav .open .dropdown-menu > .active > a, .navbar-cloud .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-cloud .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #96becd;
    background-color: #284855;
  }
}

Answer 1

DEMO

.navbar-inverse .navbar-nav>li>a.btn-danger:hover {
    background-color: #d9534f;
    color:#fff;
}

.navbar-inverse .navbar-nav>li>a.btn-success:hover {
    background-color: #5cb85c;
        color:#fff;
}
.navbar-inverse .navbar-nav>li>a.btn-danger {
    color:#000;
}

.navbar-inverse .navbar-nav>li>a.btn-success {
        color:#000;
}

Consider reading this Button hover & .btn-default styling

And Twitter bootstrap, buttons hover style?

Answer 2

You need to override the default bootstrap CSS by adding Background: transparent; to the following CSS rules:

.navbar-cloud .navbar-nav > li > a:hover,
.navbar-cloud .navbar-nav > li > a:focus {
  background: transparent;
  color: #96becd;
}

I have created a JSFIDDLE showing the result HERE