At a time when any other properties (such as background color, frame, etc.) are easily redefined. HTML code:

header { background-color: #00008B; margin: 0; font-size: 18px; } .menu { border: none; } .nav-left li, .navbar-right li { padding: 15px 15px; } .navbar-right li { padding-right: 50px; } .navbar-logo { padding-right: 60px; padding-left: 60px; } .navbar-logo img { position: relative; top: 25px; } .nav-left li:hover, .navbar-right li:hover { text-transform: uppercase; color: #32CD32; } .navbar-nav .active-link { text-transform: uppercase; } 
 <header> <nav class="navbar navbar-default menu"> <div class="container"> <!-- Brand и toggle сгруппированы для лучшего отображения на мобильных дисплеях --> <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-logo" href="#"><img src="img/logo.png" width="35"></a> </div> <!-- Соберите навигационные ссылки, формы, и другой контент для переключения --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav nav-left"> <li class="active-link"><a href="#">Professional skills</a></li> <li><a href="#">Projects</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">About me <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Education</a></li> <li><a href="#">Hobby</a></li> </ul> </li> <li><a href="#">Interesting in web</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Contact</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> </header>

    1 answer 1

    You set the style on li, and not on the link, you need to set changes to the link, try this:

     .nav-left li:hover a, .navbar-right li:hover a { text-transform: uppercase; color: #32CD32; } 

     header { background-color: #00008B; margin: 0; font-size: 18px; } .menu { border: none; } .nav-left li, .navbar-right li { padding: 15px 15px; } .navbar-right li { padding-right: 50px; } .navbar-logo { padding-right: 60px; padding-left: 60px; } .navbar-logo img { position: relative; top: 25px; } .nav-left li:hover a, .navbar-right li:hover a { text-transform: uppercase; color: #32CD32; } .navbar-nav .active-link { text-transform: uppercase; } 
     <header> <nav class="navbar navbar-default menu"> <div class="container"> <!-- Brand и toggle сгруппированы для лучшего отображения на мобильных дисплеях --> <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-logo" href="#"><img src="img/logo.png" width="35"></a> </div> <!-- Соберите навигационные ссылки, формы, и другой контент для переключения --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav nav-left"> <li class="active-link"><a href="#">Professional skills</a></li> <li><a href="#">Projects</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">About me <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Education</a></li> <li><a href="#">Hobby</a></li> </ul> </li> <li><a href="#">Interesting in web</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Contact</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> </header>

    In the future, such spaces will occur, train yourself to set styles always directly on the link, and not on the parent element, the bootstrap is initially color set in all states.