Duda con menú css

Hola, estoy haciendo un menu en el que le pongo a los botones un estado hover para que el fondo aparezca con un color gris claro al pasar el ratón por encima.

Este es el html del menú:

Código HTML :

 <div id="botones_menu">
                      <ul>  
                        <li><a href="#">HOME</a></li>
                        <li><a href="#">SOBRE NOSOTROS</a></li>  
                        <li><a href="#">PORTAFOLIO</a></li>
                        <li><a href="#">CONTACTO</a></li>  
                        <li><a href="#">BLOG</a></li>  
                     </ul>  
               </div>

Y este es el css del hover:

Código CSS :

#botones_menu ul li:hover{
    background-color:#CCC;
    cursor:pointer;
}

¿Cómo puedo hacer para que cuando se haga click en uno de los botones se quede el color gris de fondo aunque se haya quitado el ratón de encima?

Gracias.

Al ser al elemento <li> que le querés cambiar los estilos te recomiendo que con JS le agregues una clase que tenga las propiedades que vos necesitas, si fuera sobre <a> podrías usar :active de CSS.
Saludos

exacto, tienes el hover y el active, hover cuando pasas el mouse y el :active te tendria que servir, igualmente me quedan mis dudas si lo tienes que poner sobre el li, o lo correcto seria a:active, lo mismo para el hover

Saludos!

con Jquery Seria la mejor opcion.

Los compañeros tienen toda la razón.
Si quieres que un elemento de un menú se quede "activo" cuando estamos en su sección, hay que añadirle la clase ".active" al elemento (en tu caso al <li>).
No se como estás haciendo la web, no se si el menú se genera de forma dinámica o lo generas tu "a mano" en cada página.
Lo más correcto es que se genere de forma dinámica en cada página, en este caso tienes que meter la clase ".active" mediante js.
Pero si lo que haces es general "a mano" el menú en cada página, puedes generar tambien "a mano" la clase ".active" al elemento que quieras que se quede activo.
Te pongo un ejemplo de como quedaría tu menú:

Código :

<div id="botones_menu">
                      <ul>  
                        <li><a href="#">HOME</a></li>
                        <li class="active"><a href="#">SOBRE NOSOTROS</a></li>  
                        <li><a href="#">PORTAFOLIO</a></li>
                        <li><a href="#">CONTACTO</a></li>  
                        <li><a href="#">BLOG</a></li>  
                     </ul>  
               </div>

En este caso estamos dando la clase ".active" al elemento "SOBRE NOSOTROS".
Ahora hay que definir el css:

Código :

#botones_menu ul .active{
    background-color:#CCC;
}

de esta manera el elemento "SOBRE NOSOTROS" tendrá el fondo de color gris.
Pero claro, esta solución solo te sirve para la página "SOBRE NOSOTROS", en las otras páginas (PORTAFOLIO, CONTACTO, etc.) tendrás que meterle la clase "a mano" en el <li> que te interese.

Espero haberte ayudado.
Un saludo.

Muchas gracias a todos por vuestras respuestas!