bootstrap wp custom menu hover color

[  HTML snippet ]
<nav class="navbar navbar-inverse ">
<div class="container-fluid">
<div class="navbar-header">
<div id="myNavbar" class="navbar-collapse collapse">
<ul id="menu-header-menu" class="nav navbar-nav navbar-right">
<li id="menu-item-23" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-23 active">
<a href="http://www.cfnaonline.dev" title="HOME">HOME</a>
</li>
<li id="menu-item-214" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-214 dropdown">
-------------
FROM FIREBUG
[bootstrap.css 4.1 ]
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
    background-color: #080808;
    color: #fff;
}
[style.css ]
.navbar-nav > .active > a, .nav.navbar-nav > .active > a:hover, .nav.navbar-nav > .active > a:focus {
    background-attachment: scroll;
    background-clip: border-box;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
}
--------------
my style.css

html {
    height: 100%;
}
body {
	padding-top: 60px;
	padding-bottom: 20px;
}
.home {
	background: #008744;
	padding-top: 110px;
	padding-bottom: 50px;
}
.navbar.navbar-inverse {
	background-color: #005329;
	border-color: transparent  transparent #78909C;
	border-radius: 0;
}
.navbar-nav > .active > a, .nav.navbar-nav > .active > a:hover, .nav.navbar-nav > .active > a:focus {
    	background: #00391D;
 }