Выпадающее css меню по клику

[sxacher]

Подскажите пожалуйста как сделать чтобы это меню выпадало не при наведении, а при клике:

#wb_CssMenu14
{
border: 0px #898900 solid;
background-color: transparent;
}
#wb_CssMenu14 ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
#wb_CssMenu14 li
{
float: left;
margin: 0;
padding: 0px 3px 0px 0px;
width: 188px;
}
#wb_CssMenu14 a
{
display: block;
float: left;
color: #FFFFA0;
border: 0px #FFFFA0 solid;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background-color: #898900;
background-image: url(images/1.png);
background-repeat: repeat;
background-position: center top;
font-family: Arial;
font-size: 17px;
font-weight: bold;
font-style: normal;
text-decoration: none;
width: 178px;
height: 28px;
padding: 0px 5px 0px 5px;
vertical-align: middle;
line-height: 28px;
text-align: center;
-moz-box-shadow: 3px -3px 3px #000000;
-webkit-box-shadow: 3px -3px 3px #000000;
box-shadow: 3px -3px 3px #000000;
}
#wb_CssMenu14 li:hover a, #wb_CssMenu14 a:hover
{
color: #003300;
background-color: #E0E000;
background-image: url(images/4.png);
background-repeat: repeat;
background-position: center bottom;
border: 0px #E0E000 solid;
}
#wb_CssMenu14 li.firstmain
{
padding-left: 0px;
}
#wb_CssMenu14 li.lastmain
{
padding-right: 0px;
}
#wb_CssMenu14 li:hover, #wb_CssMenu14 li a:hover
{
position: relative;
}
#wb_CssMenu14 a.withsubmenu
{
padding: 0 5px 0 5px;
width: 178px;
background-image: url(images/1.png);
background-repeat: repeat;
background-position: center top;
}
#wb_CssMenu14 li:hover a.withsubmenu, #wb_CssMenu14 a.withsubmenu:hover
{
background-image: url(images/4.png);
background-repeat: repeat;
background-position: center bottom;
}
#wb_CssMenu14 ul ul
{
position: absolute;
left: -9999px;
top: -9999px;
width: 192px;
height: auto;
border: none;
background-color: transparent;
}
#wb_CssMenu14 ul :hover ul
{
left: -2px;
top: 28px;
padding-top: 0px;
}
#wb_CssMenu14 .firstmain:hover ul
{
left: -2px;
}
#wb_CssMenu14 li li
{
width: 188px;
padding: 0 2px 2px 2px;
border: 0px #898900 solid;
border-width: 0 0px;
}
#wb_CssMenu14 li li.firstitem
{
border-top: 0px #898900 solid;
}
#wb_CssMenu14 li li.lastitem
{
border-bottom: 0px #898900 solid;
}
#wb_CssMenu14 ul ul a, #wb_CssMenu14 ul :hover ul a
{
float: none;
margin: 0;
width: 174px;
height: auto;
white-space: normal;
padding: 4px 5px 3px 5px;
background-color: #898900;
background-image: url(images/1.png);
background-repeat: repeat;
background-position: center top;
border: 2px #000000 solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: #FFFFA0;
font-family: Arial;
font-size: 17px;
font-weight: bold;
font-style: normal;
line-height: 17px;
text-align: center;
text-decoration: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#wb_CssMenu14 ul :hover ul .firstitem a
{
margin-top: 2px;
}
#wb_CssMenu14 ul ul :hover a, #wb_CssMenu14 ul ul a:hover, #wb_CssMenu14 ul ul :hover ul :hover a, #wb_CssMenu14 ul ul :hover ul a:hover
{
background-color: #E0E000;
background-image: url(images/4.png);
background-repeat: repeat;
background-position: center bottom;
border: 2px #000000 solid;
color: #003300;
}
#wb_CssMenu14 br
{
clear: both;
font-size: 1px;
height: 0;
line-height: 0;
}
<div id="wb_CssMenu14" style="position:absolute;left:264px ;top:233px;width:191px;height:28px; z-index:24;">
<ul>
<li class="firstmain"><a class="withsubmenu" href="#" target="_self">Пластинчатые&nbsp;гр ибы</a>

<ul>
<li class="firstitem"><a href="#" target="_self">Январь&nbsp;-&nbsp;ноябрь</a>
</li>
<li><a href="#" target="_self">Апрель&nbsp;-&nbsp;июль</a>
</li>
<li><a href="#" target="_self">Май&nbsp;-&nbsp;июнь</a>
</li>
<li><a href="#" target="_self">Май&nbsp;-&nbsp;сентябрь</a>

[meksik]

юзай jQuery, на CSS такое мб и реализуемо, но по мне дак проще написать строчку на jQuery, чем 50 на CSS