How to keep a link underlined after it is clicked and then hovered over

Question

In my Javascript, I have a function that underlines a link on my header navbar when clicked on:

$(".navbar-inverse .navbar-nav > li > a").click(function() {        
          $(".navbar-inverse .navbar-nav > li > a").removeClass("active"); 
          $(this).addClass("active");          
});

.active { 
      text-decoration: underline; 
} 

But after the link is clicked on and hovered over, the underline disappears and the link changes color as it normally would, due to the following CSS:

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
                            color: red; /* flash */  
 }

I tried solving this by adding text-decoration: underline; to the above CSS, but that results in an underline ALWAYS appearing when a link is hovered over. Therefore, how would I use jQuery to, on top having it underline active links like it does above, 1. prevent the underline from disappearing after the clicked link is hovered over 2. (really similar to 1) prevent the link from changing color after clicked on and hovered over.

EDIT (what it looks like doing what it's supposed to do, thanks @amol):

$(".navbar-inverse .navbar-nav > li > a ").click(function() {        
      $(".navbar-inverse .navbar-nav > li > a ").removeClass("active"); 
      $(this).addClass("active");          
});

.navbar-inverse .navbar-nav > li > a {
      color: #ffffff /* text color default */;
}

.navbar-inverse .navbar-nav > li > a.active,
.navbar-inverse .navbar-nav > li > a.active:hover,
.navbar-inverse .navbar-nav > li > a.active:focus{
      color: #ffffff;
      text-decoration: underline;
}

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
      color: red; /* flash */
}

.active { 
      text-decoration: underline; 
} 

Answer 1

Try this code

$(".navbar-inverse .navbar-nav > ul > li > a").click(function() {        
          $(".navbar-inverse .navbar-nav > ul > li > a").removeClass("active"); 
          $(this).addClass("active");          
});

Check this Demo