Different colors for hovering over buttons in Bootstrap navbar

So as the title says, I'm trying to have my Navbar using Twitter Bootstrap to have different colors when hovering over particular buttons. Here is my index.html code snippet:

<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>

The goal is to have the different buttons on the navbar (page 1, page 2, etc.,) be different colors. However, I don't know how to do that. I tried placing <Div> on the li elements such as:

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

but that somehow messes up the structure of the navbar, messing up the navbar and making the home button go above the navbar.

How can I make it so that each li element can have its own hover color?

Also, here is my CSS code that changes the hover color to red, but only red.

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

You can use Pseudo Classes for this: See CSS Pseudo-classes.

.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>