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

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

HTML

[xhtml]

• nav_01
  • sub_nav_01
  • sub_nav_02
  • sub_nav_03
  • sub_nav_04
• nav_02
  • sub_nav_01
  • sub_nav_02
  • sub_nav_03
  • sub_nav_04

[/xhtml]

CSS

[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;
}
[/css]

サンプルページ

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