I've been attempting to add a small graphic using CSS to indicate the current page the viewer is on, but for some reason, it's not highlighting properly. Below is my code:
HTML:
<ul class="side-nav">
<a href="http://www.cieloazulsantafe.com/nav-test.html"><li><span>Home</span></li></a>
<a href="http://www.cieloazulsantafe.com/sample-page.html"><li>
<span>Sample Page</span></li></a>
</ul>
CSS:
ul.side-nav span{
margin-left: 50px;
text-decoration: none;
color: #fff;
}
ul.side-nav a li{
background: url('http://cieloazulsantafe.com/wp-content/uploads/2014/03/nav-grad.png');
list-style: none;
height: 41px;
width: 250px;
line-height: 2.0;
text-decoration: none;
}
ul.side-nav a li:hover{
background: url('http://cieloazulsantafe.com/wp-content/uploads/2014/03/nav-grad1.png');
}
ul.side-nav a li.current-menu-item{
background: url('http://cieloazulsantafe.com/wp-content/uploads/2014/03/nav-grad1.png');
}
a{
text-decoration: none;
}
Everything seems correct, but I can't seem to change the background as intended. It could be due to the order of the "current-menu-item." Any thoughts or advice would be greatly appreciated.
Url : Thanks in advance.