apply css to li on click without jquery or javascript

css

Solution

You can do it with CSS only using `focus` and `tabindex`

DEMO http://jsfiddle.net/kevinPHPkevin/LstNS/4/

li:focus  {
  background: red;
  outline: 0;
}

A good way to employ an 'active' menu item solution is this

DEMO http://jsfiddle.net/kevinPHPkevin/LstNS/6/

Source: http://www.456bereastreet.com/archive/200503/setting_the_current_menu_state_with_css/

Problem

here is my html code ``` <div id="menus"> <ul> <li><a href="HomePage.html">Home</a></li> <li><a href="#">Users</a></li> <li><a href="#">Project Manage</a></li> <li><a href="#">Transaction</a></li> <li style="border-right:none;"><a href="#">Logout</a></li> </ul> </div> ``` here is my CSS ``` #menus li { float:left; list-style-type: none; padding-left: 25px; padding-right: 25px; border-right:groove 1px #FFFFFF; background: #666666; } #menus li:hover { background: #999999; } #menus li a { font-size:24px; text-decoration:none; color:#FFFFFF; } #menus li a:hover { color:#000000; } ``` now i want to change css when user click on li (like display current selected). can I do this using css only?? If yes then how?? Thanks in advance..

Original source