Active state not working in Bootstrap menu

Hi,

I am trying to set up a simple Bootstrap menu it works fine except the Active component doesn't work.  Meaning, when I load the page into a browser, I can click on the various links in my menu and the browser will take me there, but the "Active" display doesn't change.  I'm using bootstrap.css, jquery-1.11.2.min and bootstrap.js.  I even tried making a fresh HTML page and loading a fresh bootstrap menu into it -- no luck.  I'm at my wit's end, so any help will be much appreciated.  Here's my code, HTML and CSS.

<!-- Collect the nav links, forms, and other content for toggling -->

    <div class="collapse navbar-collapse" id="defaultNavbar1">

      <ul class="nav navbar-nav">

        <li class="active">

            <a href="inside_page_1.html">Inside Page 1<span class="sr-only">(current)</span></a>

        </li>

       <li><a href="inside_page_2.html">Inside Page 2</a></li>

        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown<span class="caret"></span></a>

          <ul class="dropdown-menu" role="menu">

            <li><a href="#">Action</a></li>

            <li><a href="#">Another action</a></li>

            <li><a href="#">Something else here</a></li>

            <li class="divider"></li>

            <li><a href="#">Separated link</a></li>

            <li class="divider"></li>

            <li><a href="#">One more separated link</a></li>

          </ul>

        </li>

      </ul>

.navbar-default .navbar-nav > .active > a,

.navbar-default .navbar-nav > .active > a:hover,

.navbar-default .navbar-nav > .active > a:focus {

    color: #00B309;

    background-color: #FF0004;

}