Различные цвета для зависания над кнопками в навигационной панели Bootstrap

Question

Итак, как говорится в заголовке, я пытаюсь, чтобы мой Navbar использовал Twitter Bootstrap, чтобы при наведении курсора на определенные кнопки были разные цвета. Вот мой фрагмент кода index.html:

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse"
      data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Frank does...</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
    </div>
  </div>  
</nav>

Цель состоит в том, чтобы разные кнопки на панели навигации (стр. 1, стр. 2 и т. Д.) Были разных цветов. Однако я не знаю, как это сделать. Я пытался разместить <Div> на li такие элементы как:

<div class="home"><li><a href="#">Home</a></li></div>

но это каким-то образом портит структуру панели навигации, портит панель навигации и заставляет кнопку "Домой" идти выше панели навигации.

Как мне сделать так, чтобы каждый li элемент может иметь свой собственный hover цвет?

Кроме того, вот мой код CSS, который меняет цвет наведения на красный, но только на красный.

.navbar-inverse .navbar-collapse li a:hover,
.navbar-inverse .navbar-collapse li a:focus{
    background-color:red;
}

Answer 1

Вы можете использовать псевдоклассы для этого: См. CSS псевдоклассы.

.navbar-inverse .navbar-nav li:first-child:hover {
  background-color: green;
}
.navbar-inverse .navbar-nav li:nth-child(2):hover {
  background-color: lightblue;
}
.navbar-inverse .navbar-nav li:nth-child(3):hover {
  background-color: teal;
}
.navbar-inverse .navbar-nav li:nth-child(4):hover {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button> <a class="navbar-brand" href="#">Frank does...</a>

    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li><a href="#">Home</a>

        </li>
        <li><a href="#">Page 1</a>

        </li>
        <li><a href="#">Page 2</a>

        </li>
        <li><a href="#">Page 3</a>

        </li>
      </ul>
    </div>
  </div>
</nav>