I have a menu set up on my website that currently underlines when hovered over. However, I would like it to change color instead, which is the default style for my Wordpress theme. The title, "BOLI STYLUS," changes color exactly as I want it to.
Below 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>
Next, here is the menu:
And 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;
}
Finally, here is the code from header.php:
<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>