用dede做了一个网站，但是产品展示的侧边导航很不满意，自己在网上找了代码片段改了之后还是达不到想要的效果，现在的效果如图：
鼠标移动向右展开的，我想改成鼠标点击向下展开，点击下一个收起之前展开的，展开正在点击的。麻烦了，谢谢！
html代码：
<div class="tit">栏目导航</div>
<div class="cates">
<div class="menu">
<ul>
{dede:channel type='top' }
<li><a class="hide" href="[field:typelink/]">[field:typename/]</a>
<ul>[field:sonchannel0]<li><a href="[field:typelink/]">[field:typename/]</a>
<ul class="right_side">[field:sonchannel1]
<li><a href="[field:typelink/]">[field:typename/]</a></li>
[/field:sonchannel1]
</ul></li>
[/field:sonchannel0]</ul>
{/dede:channel}
</ul>
</div>
</div>
</div>
CSS部分
<style>
.menu {width:76px;height:150px; position:relative; font-size:16px;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:74px; height:25px; text-align:center; color:#000;line-height:20px; font-size:15px; overflow:hidden;}
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; margin-right:1px; position:relative;}
.menu ul li ul {display: none;}
/* specific to non IE browsers */
.menu ul li:hover a {color:#000; background:#FEBFD1;}
.menu ul li:hover ul {display:block; position:absolute; top:0; left:75px; width:75px;}
.menu ul li:hover ul li a.hide {background:#FEBFD1; color:#000;}
.menu ul li:hover ul li:hover a.hide {background:#F66E95; color:#fff;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#FEBFD1; color:#000;}
.menu ul li:hover ul li a:hover {background:#F66E95; color:#fff;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:75px; top:0;}
