2 niveles
Fuente: http://stackoverflow.com/questions/tagged/css
<ul tabindex='0'>
<li>
<input id='item1' type='radio' name='item' checked='true' />
<label for='item1'>Item 1</label>
</li>
<li>
<input id='item2' type='radio' name='item' />
<label for='item2'>Item 2</label>
</li>
<li>
<input id='item3' type='radio' name='item' />
<label for='item3'>Item 3</label>
</li>
</ul>
CSS
ul, li {
list-style:none;
margin:0;
padding:0;
}
li input {
display:none;
}
ul:not(:focus) input:not(:checked), ul:not(:focus) input:not(:checked) + label {
display:none;
}
input:checked+label {
color:red;
}