DIV+CSS构成的树型菜单

来源：互联网发布：mac怎么连接电视编辑：程序博客网时间：2024/05/17 00:06

DIV+CSS构成的树型菜单

效果图：

DIV+CSS构成的树型菜单

可以折叠的。

源代码：

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>DIV+CSS构成的树型菜单</title><mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">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;}</style><mce:script type="text/javascript"></mce:script></head><body><ul id="treenav"> <li> <ul> <li><a href="somepage" mce_href="somepage" onclick="toggleMenu('submenuid0'); return false;" class="listhead">第一章前言</a> <ul class="expanded" id="submenuid0"> <li><a href="#" mce_href="#" onclick="toggleMenu('sub0_submenuid1');">第一节网站设计概述</a> <ul class="collapsed" id="sub0_submenuid1"> <li><a href="#" mce_href="#">网页制作一般过程</a></li> <li><a href="#" mce_href="#">网页设计的价格标准</a></li> </ul> </li> <li><a href="#" mce_href="#" onclick="toggleMenu('sub0_submenuid2');">第二节网站设计概述</a> <ul class="collapsed" id="sub0_submenuid2"> <li><a href="#" mce_href="#">网页设计的价格标准</a></li> </ul> </li> </ul> </li> </ul><ul> <li><a href="somepage" mce_href="somepage" onclick="toggleMenu('submenuid1'); return false;" class="listhead">第一章前言</a> <ul class="expanded" id="submenuid1"> <li><a href="#" mce_href="#" onclick="toggleMenu('sub1_submenuid1');">第一节网站设计概述</a> <ul class="collapsed" id="sub1_submenuid1"> <li><a href="#" mce_href="#">网页制作一般过程</a></li> <li><a href="#" mce_href="#">网页制作一般过程</a></li> <li><a href="#" mce_href="#">网页制作一般过程</a></li> <li><a href="#" mce_href="#">网页制作一般过程</a></li> <li><a href="#" mce_href="#">网页设计的价格标准</a></li> <li><a href="#" mce_href="#">网页设计的价格标准</a></li> </ul> </li> <li><a href="#" mce_href="#" onclick="toggleMenu('sub1_submenuid2');">第二节网站设计概述</a> <ul class="collapsed" id="sub1_submenuid2"> <li><a href="#" mce_href="#">网页制作一般过程</a></li> <li><a href="#" mce_href="#">网页制作一般过程</a></li> <li><a href="#" mce_href="#">网页制作一般过程</a></li> <li><a href="#" mce_href="#">网页制作一般过程</a></li> <li><a href="#" mce_href="#">网页设计的价格标准</a></li> <li><a href="#" mce_href="#">网页设计的价格标准</a></li> </ul> </li> </ul> </li> </ul> </li></ul></body></html>