DIV+CSS构成的树型菜单(符合web标准)

为了做个树型菜单，看了很多代码，但都没这个简洁，外国人写的，一起分享下：
1 先定义个JS：

<script type="text/java script"> function toggleMenu(id){ element = document.getElementById(id); element.className = (element.className.toLowerCase() == 'expanded'?'collapsed':'expanded'); } onload = function() {//自动载入闭合状态 toggleMenu('submenuid0'); toggleMenu('submenuid1'); } </script>

2 css

body { margin: 0px; padding: 0; font: 12px "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; background: #FFFFFF; text-align: center; } ul{ margin: 0; padding: 0; list-style: none; } #treenav { margin: 10px; text-align: left; } #treenav ul li { margin: 1px 0; padding: 0; font-size: 11px; } #treenav ul.expanded { display: block; } #treenav ul.expanded,#treenav ul.collapsed { margin: 5px 10px; } #treenav ul.collapsed { display: none; } .expanded li,.collapsed li{ /*border-bottom: 1px dashed #CCCCCC;*/ width: 200px; } .listhead { font-weight: bold; display: block; font-size: 12px; color: #333333; background: #F1F1F1; padding: 3px; width: 120px; margin: 1px 0; } #treenav a { text-decoration: none; color: #666666; } #treenav a:hover { color: #990000; }

3 定义树型结构

<!--------------------------------------------------------------------------------------------------------> <ul>       <li><a href="somepage" onclick="toggleMenu('submenuid0'); return false;" class="listhead">第一章 前言</a>             <ul class="expanded" id="submenuid0">   <li><a href="#" onclick="toggleMenu('sub0_submenuid1');">第一节 网站设计概述</a>      <ul class="collapsed" id="sub0_submenuid1">      <li><a href="#">网页制作一般过程</a></li>      <li><a href="#">网页设计的价格标准</a></li>            </ul>   </li>        <li><a href="#" onclick="toggleMenu('sub0_submenuid2');">第二节 网站设计概述</a>      <ul class="collapsed" id="sub0_submenuid2">      <li><a href="#">网页设计的价格标准</a></li>            </ul>   </li>           </ul>   </li>  </ul> <!--------------------------------------------------------------------------------------------------------> <ul>       <li><a href="somepage" onclick="toggleMenu('submenuid1'); return false;" class="listhead">第一章 前言</a>             <ul class="expanded" id="submenuid1">   <li><a href="#" onclick="toggleMenu('sub1_submenuid1');">第一节 网站设计概述</a>      <ul class="collapsed" id="sub1_submenuid1">      <li><a href="#">网页制作一般过程</a></li>      <li><a href="#">网页制作一般过程</a></li>      <li><a href="#">网页制作一般过程</a></li>      <li><a href="#">网页制作一般过程</a></li>      <li><a href="#">网页设计的价格标准</a></li>      <li><a href="#">网页设计的价格标准</a></li>            </ul>   </li>        <li><a href="#" onclick="toggleMenu('sub1_submenuid2');">第二节 网站设计概述</a>      <ul class="collapsed" id="sub1_submenuid2">      <li><a href="#">网页制作一般过程</a></li>      <li><a href="#">网页制作一般过程</a></li>      <li><a href="#">网页制作一般过程</a></li>      <li><a href="#">网页制作一般过程</a></li>      <li><a href="#">网页设计的价格标准</a></li>      <li><a href="#">网页设计的价格标准</a></li>            </ul>   </li>           </ul>   </li>  </ul> <!-------------------------------------------------------------------------------------------------------->