How to make the link text change color instead of underlining when hovered over

Question

I have this menu I set up and it underlines when hovered over, but I would like it to change color, which is the default for my wordpress theme. The title, "BOLI STYLUS" changes color exactly like I want.

Here is the code for the title:

<hgroup>
                <h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>
                <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
            </hgroup> 

Here is the menu:

Here is the style.css code for it:

.header_nav ul{
    margin: 0; 
    padding: 0;
    text-align: center;
    }

.header_nav ul li{
    display: inline;
    }

.header_nav ul li a{
    float: center; 
    padding: 10.5px 11px;
    }

.header_nav ul li a:hover, .menu ul li .current{
    color: #50a9cb;
    }

Here is the header.php code:

<div class="header_nav">
                <ul>

                            <li><a href="/pages/glifoptions">BOLI</a></li>      

                            <li><a href="/products/cosmonaut">BOLI+</a></li>

                            <li><a href="/pages/about-us">ABOUT US</a></li>

                            <li><a href="/pages/faq">FAQ</a></li>

                            <li><a href="/pages/press">PRESS</a></li>   

                    <li><a href="/cart">YOUR CART (0)</a></li>
                </ul>
            </div>

Answer 1

You can use the following rule, and replace XXXXXX with your desired color. I assume you want to keep the styles in the same spirit, ie have the selected item also have the same style as when you hover it.

.header_nav ul li a:hover, .menu ul li .current
{
    color: #XXXXXX; /* replace with real value */ text-decoration: none;
}

Answer 2

The code that you showed already does color the text when you hover it. It also, however, underlines it. To change that add text-decoration: none; like I did below.

.header_nav ul li a{
    float: center;
    padding: 10.5px 11px;
    **text-decoration: none;**
    }

For the complete code, see here:

http://jsfiddle.net/8KPcy/1/