Bootstrap nav-pills hover state works only first time

Question

I've been trying to change the color when my nav-pills are hovered over. I am able to see the change the first time I view the nav menu (the hover state works), but if I click to another page (or navigate back to the home page), the hover state no longer works. I've tried searching for an answer and cannot find one.

I am attaching images of what the hover state looks like when it's working (first time on page) and when it is not (after navigating away and returning to the page OR going to another page on my site).

I am also including a snippet of html for my nav menu, plus the code from my custom CSS related to the nav menu.

I'd appreciate any help anyone can offer me. My test site (where I've been working on this) is test.kmcmarine.com. My live site is www.kmcmarine.com.

    <nav class="navbar navbar-default" role="navigation">
            <div class="navbar-header center-block">
           <!--<a class="navbar-brand pull-left" href="#">
            <img class="img-responsive" src="Images/KMCnavbrand.jpg">
        </a>-->
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
                      <span class="sr-only">Toggle navigation</span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                </button>
            </div>
        <div class="collapse navbar-collapse" id="collapse">
                <ul class="nav nav-pills nav-stacked">
                    <li class="active"><a href="http://www.kmcmarine.com/index.html">Home</a></li>
                    <li class="dropdown"><a href="#" class="caption" data-toggle="dropdown">Boat Sales</a>
                        <ul class="dropdown-menu pull-right">
                            <li><a href="http://www.kmcmarine.com/jupiter.html">Jupiter Boats</a></li>
                            <li><a href="http://www.boattrader.com/dealers/KMC-Marine---KMC-Marine/2969745" target="_blank">Pre-Owned Boats</a></li>
                            <li><a href="http://www.kmcmarine.com/export.html">Export</a></li>
                      </ul>
                  </li>    
                    <li><a href="http://www.kmcmarine.com/service.html">Service</a></li>
                    <li><a href="http://www.kmcmarine.com/parts.html">Parts</a></li>
                    <li><a href="http://www.kmcmarine.com/aboutus.html">About Us</a></li>
                    <li><a href="http://www.kmcmarine.com/contactus.html">Contact Us</a></li>
                    <li><a href="http://www.kmcmarine.com/conditions.html">Local Conditions</a></li>
                </ul>

Custom CSS:

 nav.navbar.navbar-default { font-weight: bold; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 16px; padding-left: 0px; padding-right: 0px; background: rgba(255, 255, 255, 0.3); height: 45px; } .navbar .nav > li > a, .dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a { color: #FFF; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+20,2989d8+50,1e5799+80&0+0,0.8+1,1+19,1+81,0.8+99,0.8+99,0+100 */ background: -moz-linear-gradient(top, rgba(30,87,153,0) 0%, rgba(30,87,153,0.8) 1%, rgba(30,87,153,1) 19%, rgba(30,87,153,1) 20%, rgba(41,137,216,1) 50%, rgba(30,87,153,1) 80%, rgba(30,87,153,1) 81%, rgba(30,87,153,0.8) 99%, rgba(30,87,153,0) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,0)), color-stop(1%,rgba(30,87,153,0.8)), color-stop(19%,rgba(30,87,153,1)), color-stop(20%,rgba(30,87,153,1)), color-stop(50%,rgba(41,137,216,1)), color-stop(80%,rgba(30,87,153,1)), color-stop(81%,rgba(30,87,153,1)), color-stop(99%,rgba(30,87,153,0.8)), color-stop(100%,rgba(30,87,153,0))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(30,87,153,0) 0%,rgba(30,87,153,0.8) 1%,rgba(30,87,153,1) 19%,rgba(30,87,153,1) 20%,rgba(41,137,216,1) 50%,rgba(30,87,153,1) 80%,rgba(30,87,153,1) 81%,rgba(30,87,153,0.8) 99%,rgba(30,87,153,0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(30,87,153,0) 0%,rgba(30,87,153,0.8) 1%,rgba(30,87,153,1) 19%,rgba(30,87,153,1) 20%,rgba(41,137,216,1) 50%,rgba(30,87,153,1) 80%,rgba(30,87,153,1) 81%,rgba(30,87,153,0.8) 99%,rgba(30,87,153,0) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(30,87,153,0) 0%,rgba(30,87,153,0.8) 1%,rgba(30,87,153,1) 19%,rgba(30,87,153,1) 20%,rgba(41,137,216,1) 50%,rgba(30,87,153,1) 80%,rgba(30,87,153,1) 81%,rgba(30,87,153,0.8) 99%,rgba(30,87,153,0) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(30,87,153,0) 0%,rgba(30,87,153,0.8) 1%,rgba(30,87,153,1) 19%,rgba(30,87,153,1) 20%,rgba(41,137,216,1) 50%,rgba(30,87,153,1) 80%,rgba(30,87,153,1) 81%,rgba(30,87,153,0.8) 99%,rgba(30,87,153,0) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001e5799', endColorstr='#001e5799',GradientType=0 ); /* IE6-9 */ font-weight: bold; } .nav > li > a:hover, .nav > li > a:focus { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cedbe9+0,aac5de+17,6199c7+50,3a84c3+51,419ad6+59,4bb8f0+71,3a8bc2+84,26558b+100;Blue+Gloss */ background: rgb(206,219,233); /* Old browsers */ background: -moz-linear-gradient(top, rgba(206,219,233,1) 0%, rgba(170,197,222,1) 17%, rgba(97,153,199,1) 50%, rgba(58,132,195,1) 51%, rgba(65,154,214,1) 59%, rgba(75,184,240,1) 71%, rgba(58,139,194,1) 84%, rgba(38,85,139,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(206,219,233,1)), color-stop(17%,rgba(170,197,222,1)), color-stop(50%,rgba(97,153,199,1)), color-stop(51%,rgba(58,132,195,1)), color-stop(59%,rgba(65,154,214,1)), color-stop(71%,rgba(75,184,240,1)), color-stop(84%,rgba(58,139,194,1)), color-stop(100%,rgba(38,85,139,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(206,219,233,1) 0%,rgba(170,197,222,1) 17%,rgba(97,153,199,1) 50%,rgba(58,132,195,1) 51%,rgba(65,154,214,1) 59%,rgba(75,184,240,1) 71%,rgba(58,139,194,1) 84%,rgba(38,85,139,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(206,219,233,1) 0%,rgba(170,197,222,1) 17%,rgba(97,153,199,1) 50%,rgba(58,132,195,1) 51%,rgba(65,154,214,1) 59%,rgba(75,184,240,1) 71%,rgba(58,139,194,1) 84%,rgba(38,85,139,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(206,219,233,1) 0%,rgba(170,197,222,1) 17%,rgba(97,153,199,1) 50%,rgba(58,132,195,1) 51%,rgba(65,154,214,1) 59%,rgba(75,184,240,1) 71%,rgba(58,139,194,1) 84%,rgba(38,85,139,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(206,219,233,1) 0%,rgba(170,197,222,1) 17%,rgba(97,153,199,1) 50%,rgba(58,132,195,1) 51%,rgba(65,154,214,1) 59%,rgba(75,184,240,1) 71%,rgba(58,139,194,1) 84%,rgba(38,85,139,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedbe9', endColorstr='#26558b',GradientType=0 ); /* IE6-9 */ color: #FFF; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; } .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus, .dropdown-menu { color: #060a76; http://colorzilla.com/gradient-editor/#f6f8f9+0,e5ebee+50,d7dee3+51,f5f7f9+100;White+Gloss */ background: rgb(246,248,249); /* Old browsers */ background: -moz-linear-gradient(top, rgba(246,248,249,1) 0%, rgba(229,235,238,1) 50%, rgba(215,222,227,1) 51%, rgba(245,247,249,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,248,249,1)), color-stop(50%,rgba(229,235,238,1)), color-stop(51%,rgba(215,222,227,1)), color-stop(100%,rgba(245,247,249,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=0 ); /* IE6-9 */ font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; } 

Answer 1

After doing additional research (searching for an answer in various ways), I found the answer to my problem on this feed: Hover Disabled after Waypoint Event the !important; worked! :)

Answer 2

There is an error in your JavaScript code

This line:

<script $(".dropdown > li > a").on("click", function(e){

Should be:

<script type="text/javascript">
$(".dropdown > li > a").on("click", function(e){

Look at your browser's JavaScript console in aboutus.html

SyntaxError: missing ; before statement