How to change hover underline color in Header without changing the actual text above it?

I am trying to make my navigation pages to underline on hover; however, I do not want it to change the color of the words above the underline like this. I want it to look like this:

But, currently, it looks like this:

when using the code:

style
#header a:active{
 text-decoration: underline !important;
}

#header a:hover{color: red!important;
 text-decoration: underline ! important;
}

div.folder.active{
 text-decoration: underline ! important;
}

Any suggestions? I am using 7.1.

Add to Home > Design > Custom CSS

.header-nav-item:hover a {
    text-decoration: underline;
}