Trying to customize nav-pills in Twitter Bootstrap

I'd like to change the rollover color of the pills and the active pill color. My html looks like this:

 <div class="theme">
    <div class="banner">
        <h1>Sandstorm</h1>
        <ul class="nav nav-pills red">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Events</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
</div>

And my CSS looks like this:

.red .active a,
.red .active a:hover {
    background-color:red;
}

But the color won't budge. What am I missing?

(I'd also like to change the font... but maybe that's too ambitious.)

Solution

Change your CSS like so:

CSS

.red .active a,
.red .active a:hover{
    background:red !important;
}
.red a:hover {
     background: red !important;
    color:white;
}

Just make sure you are targeting the exact item you want to change. If you want only the active pill to be red, then comment out the following CSS to take the hover color-effect away:

.red a:hover {
     background: red !important;
    color:white;
}

Trying to customize nav-pills in Twitter Bootstrap

Demo JSFiddle