Начальная навигация Навигация или щелчок

Question

Я пытаюсь заставить кнопки навигации менять цвет при наведении или нажатии.Но проблема в том, что что бы я ни делал, я не могу заставить его работать.Загрузочная навигация отличается от CSS, и я не знаю, где я делаю ошибку.

Вот мой код, и любая помощь или предложения будут оценены.

HTML:

<nav class="navbar navbar-default">
  <div class="container-fluid">
  <ul class="nav navbar-nav">
  <li><a href="index.html" >HOME</a></li>
  <li><a href="about.html">ABOUT</a></li>
  <li><a href="resume.html">RESUME</a></li>
  <li><a href="contact.html">CONTACT</a></li>
  </ul>
  </div>
  </nav>

и это мой CSS:

.container-fluid{
margin-left: 30em;
}

.navbar-brand{
max-width:100px;
padding-left: 10px;
}

.navbar-default {
background-color: #f8f8f800; 
border-color: #e7e7e700;
}

.navbar-default .navbar-nav>li>a {
color: #faebd7;
}

.navbar-nav>li>a {
padding-top: 40px;
padding-bottom: 15px;
font-size: 1.8em;
font-weight: bold;    
}

Answer 1

Как показал комментарий, у вас нет класса :hover. Вы не можете изменить цвет, не наведя курсор на элемент.

Здесь этот код был протестирован и работает для достижения желаемого эффекта:

<nav class="navbar navbar-default">
  <div class="container-fluid">
  <ul class="nav navbar-nav">
  <li><a class="link" href="index.html" >HOME</a></li>
  <li><a class="link" href="about.html">ABOUT</a></li>
  <li><a class="link" href="resume.html">RESUME</a></li>
  <li><a class="link" href="contact.html">CONTACT</a></li>
  </ul>
  </div>
  </nav> 

CSS:

 .container-fluid{
    margin-left: 5em;
    }

    .navbar-brand{
    max-width:100px;
    padding-left: 10px;
    }

    .navbar-default {
    background-color: #f8f8f800; 
    border-color: #e7e7e700;
    }

    /** For simplicity of the example I added a class to your link tag. See the hover effect below **/

    .link {

      color: #faebd7;
      transition: all 0.5s ease-in-out; 
    }

    .link:hover {

      color: red; 

    }

    .navbar-nav>li>a {

    font-size: 1.8em;
    font-weight: bold;    
    }

Убедитесь сами: https://jsfiddle.net/billy_farroll/hnff1xw1/