Tengo el siguiente código:
#main,
#main ul,
#main li,
#main a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
font-weight: normal;
text-decoration: none;
line-height: 1;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
position: relative;
}
#main{
width: 250;
border-right: 1px solid #ececec;
}
#main a {
line-height: 1.3;
}
#main > ul > li {
background: #f7f7f7;
background: -moz-linear-gradient(#f7f7f7 0%, #ececec 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f7f7f7), color-stop(100%, #ececec));
background: -webkit-linear-gradient(#f7f7f7 0%, #ececec 100%);
background: linear-gradient(#f7f7f7 0%, #ececec 100%);
}
#main > ul > li a:hover {
background: #2E779A;
background: -moz-linear-gradient(#2E779A 0%, #2E779A 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2E779A), color-stop(100%, #2E779A));
background: -webkit-linear-gradient(#2E779A 0%, #2E779A 100%);
background: linear-gradient(#2E779A 0%, #2E779A 100%);
color: #ffffff;
}
#main > ul > li > a {
font-size: 14px;
display: block;
color: #2E779A;
border: 1px solid #ececec;
border-top: none;
text-shadow: 0 -1px 1px #ececec;
}
<div id="main">
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Sobre nosotros</a></li>
<li><a href="#">Producto</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>
Y lo que quiero es que al momento de seleccionar un campo, este mismo cambie de color para señalarle al usuario en que sección se encuentra ¿Puedo hacer esto con css o necesito usar jQuery?