Creating simple CSS multilevel menu - css

Question

I am trying to make a webpage with a navigation functionality EXACTLY like this one: http://www.rex-ny.com/ where you click a list item and its children items appear and stay.
I can do it with hover, but I can't figure out how to make it stay when not hovering.
It seems like the most simple thing is the most difficult to do.
<ul id="menu">
<li>Menu 1
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
</li>
<li>Menu 2
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
</li>
<li>Menu 3
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
</li>
</ul>
Thanks
Here is a jsfiddle http://jsfiddle.net/phzuC/

Answer 1

Here is a CSS only solution as the OP requested, using tabindex
DEMO http://jsfiddle.net/kevinPHPkevin/phzuC/2/
#menu li > ul {
display:none;
}
#menu li:focus > ul {
display:block;
}
li {
outline: 0;
}
EDITED
Here is a jQuery solution should you ever need it. It keeps the submenus open and it's simple to implement. 11 lines of code.
DEMO http://jsfiddle.net/kevinPHPkevin/phzuC/5/
$(document).ready(function() {
$(".nav-top > li").click(function(e) {
if($(this).find('ul').hasClass('expanded')) {
$(this).find('ul').removeClass('expanded').hide();
} else {
$(this).find('ul').addClass('expanded').show();
}
});
$('.nav-top a').click(function(e){
e.preventDefault();
});
});

Answer 2

Here is another CSS only solution that uses either:
Checkboxes if you want the menus to toggle on click
radio buttons if you want the menus to auto close when another is selected
Reference:
CSSTricks: Stuff you can do with the “Checkbox Hack”
The CSS Ninja: CSS Tree
Demo
Basic behavior CSS (the demo has more styling to remove the default list indentation/bullets):
.sideMenu input[type='radio'],
.sideMenu input[type='checkbox'] {
display: none;
}
.sideMenu input[type='radio'] + ul,
.sideMenu input[type='checkbox'] + ul {
position: relative;
display: none;
}
.sideMenu input[type='radio']:checked + ul,
.sideMenu input[type='checkbox']:checked + ul {
display: block;
}
HTML (can be arbitrarily deep):
<nav class="sideMenu">
<ul>
<li>
<label for="menu1">Menu 1</label>
<input id="menu1" type="checkbox" name="menu1">
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
</li>
<!-- repeat -->
</ul>
</nav>