jsp中折叠菜单栏

* { margin: 0; padding: 0; }

.tree {margin: 0;padding: 0;background-color:#f2f2f2;overflow: hidden;}

/*隐藏input*/

.tree li input{position: absolute;left: 0;opacity: 0;z-index: 2;cursor: pointer;height: 1em;width:1em;top: 0;}

/*所有菜单项设置统一样式*/

.tree li {position: relative;list-style: none;}

/*一级菜单加下边线*/

.tree>li{border-bottom: 1px solid #d9d9d9;}

/*给有子菜单的菜单项添加背景图标*/

.tree li label {max-width:999px;cursor: pointer;display: block;margin:0 0 0 -50px;padding: 15px 10px 15px 70px;white-space:nowrap;overflow:hidden;text-overflow: ellipsis; }

.tree li label:hover,li label:focus{background-color:#a7a7a7;color:#fff;}

/*清除所有展开的子菜单的display*/

.tree li input + ol{display: none;}

/*当input被选中时，给所有展开的子菜单设置样式*/

.tree input:checked + ol {padding-left:14px;height: auto;display: block;}

.tree input:checked + ol > li { height: auto;}

/*末层菜单为A标签，设置样式*/

.tree li.file a{margin:0 -10px 0 -50px;padding: 15px 20px 15px 70px;text-decoration:none;display: block;color:#333333;white-space:nowrap;overflow:hidden;text-overflow: ellipsis;}

.tree li.file a:hover,li.file a:focus{background-color:#a7a7a7;color:#fff;}

/*不同层级的菜单字体大小不同*/

.tree .folderOne{font-size: 18px;}

.tree .folderTwo{font-size:16px;}

.tree .folderThree{font-size:14px;}

1. 泽元框架

   1. 开发规范

      1. 常见界面错误举例
      2. 关于发行报告对BUG管理提出…
      3. 插件内部JAVA包命名规范
   2. 概述
   3. 服务器集群
   4. 模板
   5. 安全机制

2. ZCMS

   1. 实时数据

   2. 实时数据

      1. 实时数据
      2. 实时数据
      3. 实时数据

3. ZAS

   1. 实时数据
   2. 实时数据

4. ZHTML标签

   1. 实时数据
   2. 实时数据

5. UI框架API手册

   1. 实时数据
   2. 实时数据

效果展示：