如何使用纯CSS技术实现一个可折叠树形(Tree)菜单

     <p>树形控件我们经常使用，然而构建一个树形控件大部分需要使用JavaScript技术。今天将介绍了个如何使用纯CSS来创建一个可折叠树形(Tree)菜单（<a title="Pure CSS Collapsible Tree Menu" href="/misc/goto?guid=4958194652782140187" target="_blank"><strong>Pure CSS Collapsible Tree Menu</strong></a>）。</p>    <p>经测试，它可以很好得工作在支持CSS3 selector特性的浏览器中。包括Firefox 1+, Opera 9.6+, Safari 4+, iPhone/iPod Safari, Chrome 1+, Android and IE9+等。</p>    <p>可以利用它来创建无限级目录和子目录。</p>    <p>此外还可以查一些基于JavaScript的<a href="http://www.open-open.com/ajax/tree.htm" target="_blank">树形控件</a>：<a title="Fully Interactive jQuery File Tree" href="/misc/goto?guid=4958194653539863770" target="_blank">Fully Interactive jQuery File Tree</a>, <a title="Javascript Treeview Component" href="/misc/goto?guid=4958194654284439809" target="_blank">Javascript Treeview Component</a>, <span style="text-decoration:underline;">和</span><a title="Treeview jQuery Plugin" href="/misc/goto?guid=4958194655021340006" target="_blank">Treeview jQuery Plugin</a>。</p>    <p><a title="Pure CSS Collapsible Tree Menu" href="/misc/goto?guid=4958194652782140187" target="_blank"><img title="pure-css-tree-menu" border="0" alt="pure-css-tree-menu" src="https://simg.open-open.com/show/5f7b7a8fdb9aa3e96fccad45b6f0fbad.png" width="480" height="245" /></a><br /> 示例: <a title="demo" href="/misc/goto?guid=4958194652782140187" rel="nofollow" target="_blank">http://www.thecssninja.com/css/css-tree-menu</a><br /> </p>