这样的特效必须使用到JS才行，使用jQuery最佳！
所以上方这段特效所需要的代码如下：
<!doctypehtml><html><head><metacharset="utf-8"><metaname="author"content="/"/><title>JS/JQuery鼠标点击可展示/显示、隐藏/关闭导航菜单的子菜单</title><styletype="text/css">*{padding:0px;margin:0px;font-family:microsoftyahei;}.container{margin:20px;border:1pxsolid#000;width:240px;overflow:hidden;}li{list-style:none;}.containerli{background:#63f7ff;width:240px;color:#000;font-size:18px;cursor:pointer;line-height:2em;}.containerlispan{width:0;height:0;border-top:5pxsolidtransparent;border-left:10pxsolid#000;border-bottom:5pxsolidtransparent;display:inline-block;margin:010px;}.containerli.down{width:0;height:0;border-left:5pxsolidtransparent;border-right:5pxsolidtransparent;border-top:10pxsolid#000;}.smallli{background:#fff;color:#000;border:1pxsolid#ddd;font-size:16px;padding-left:30px;}.smallli:hover{background:#63f7ff;}.hide{display:none;}.containerul.color{background:#f7f794;}</style><scriptsrc="/jquery/1.9.0/jquery.js"></script><scripttype="text/javascript">$(document).ready(function(){$(.container>ul>li).click(function(){$(this).toggleClass(color);$(this).find(span).toggleClass(down);$(this).next().toggleClass(hide);})});</script></head><body><divclass="container"><ul><li><span></span>前端教程</li><ulclass="smallhide"><li>蚂蚁部落一</li><li>蚂蚁部落二</li><li>蚂蚁部落三</li></ul><li><span></span>资源专区</li><ulclass="smallhide"><li>特效下载</li><li>移动端特效</li><li>蚂蚁部落</li></ul><li><span></span>黑名单</li><ulclass="smallhide"><li>百度</li><li>网易</li><li>腾讯</li></ul></ul></div></body></html>
其实方法还是非常简单的，主要使用了toggleClass，再点击后可切换类名，而类必须有显示和隐藏的属性！
jQuery 鼠标点击展开/显示和收缩/隐藏导航菜单（子菜单） – js/jQuery – 前端 jquery 增加onclick事件
