スタイルシートで実装するクリックで開くメニュー

久しぶりに投稿します。
既に出ていたらすみません。

HTML

<ul id="nav">
	<li class="nav_01">nav_01
<ul>
	<li><a href="#">sub_nav_01</a></li>
	<li><a href="#">sub_nav_02</a></li>
	<li><a href="#">sub_nav_03</a></li>
	<li><a href="#">sub_nav_04</a></li>
</ul>
</li>
	<li class="nav_01">nav_02
<ul>
	<li><a href="#">sub_nav_01</a></li>
	<li><a href="#">sub_nav_02</a></li>
	<li><a href="#">sub_nav_03</a></li>
	<li><a href="#">sub_nav_04</a></li>
</ul>
</li>
</ul>

CSS

#nav li
{
width:200px;
height:20px;
text-align:center;
background:#DDDDDD;
}
#nav li:hover
{
background:#00FF00;
position:relative;
}
#nav li ul
{
display:none;
}
#nav li:active ul ,
#nav li ul:hover
{
display:block;
position:absolute;
top:0px;
left:0px;
padding:0px 0px 0px 200px;
z-index:5;
}
#nav li ul li a
{
width:200px;
height:20px;
display:block;
}
#nav li ul li a:hover
{
background:#00FF00;
}

サンプルページ

クリックでは閉じませんorz