<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>主页面</title><style type="text/css" >a{ text-decoration:none;}a,a:visited{ color:#000; background:inherit;}body{ margin:0; padding:20px; font:12px tahoma,宋体,sans-serif;}dt{ font-size:22px; font-weight:bold; margin:0 0 0 15px;}dd{ margin:0 0 0 15px;}h4{ margin:0; padding:0; font-size:18px; text-align:center;}p{ margin:0; padding:0 0 0 18px;}p a,p a:visited{ color:#00f; background:inherit;}
.TreeMenu img.s{ cursor:hand; vertical-align:middle;}.TreeMenu ul{ padding:0;}.TreeMenu li{ list-style:none; padding:0;}.Closed ul{ display:none;}.Child img.s{ background:none; cursor:default;}
#CategoryTree ul{ margin:0 0 0 17px;}#CategoryTree img.s{ width:34px; height:18px;}#CategoryTree .Opened img.s{ background:url(skin3/opened.gif) no-repeat 0 1px;}#CategoryTree .Closed img.s{ background:url(skin3/closed.gif) no-repeat 0 1px;}#CategoryTree .Child img.s{ background:url(skin3/child.gif) no-repeat 13px 2px;}
#CategoryTree{ float:left; width:249px; border:1px solid #99BEEF; background:#D2E4FC; color:inherit; margin:3px; padding:3px;}
</style><script language=jscript>function ChangeStatus(o){if (o.parentNode){if (o.parentNode.className == "Opened"){o.parentNode.className = "Closed";}else{o.parentNode.className = "Opened";}}}
</script></head>
<body><div class="TreeMenu" id="CategoryTree"><h4>CSS树形菜单</h4> <ul> <li class="Opened"> <img class=s src="s.gif" οnclick="javascript:ChangeStatus(this);"> <a href="#">第一大类</a> <ul> <li class="Opened"><img class=s src="s.gif" οnclick="javascript:ChangeStatus(this);"> <a href="#">我的文档</a> <ul> <li class="Opened"><img class=s src="s.gif" οnclick="javascript:ChangeStatus(this);"> <a href="#">JavaScrit</a> <ul> <li class="Child"><img class=s src="s.gif"><a href="#">常用小技巧</a></li> <li class="Child"><img class=s src="s.gif"><a href="#">围绕鼠标的文字</a></li> <li class="Child"><img class=s src="s.gif"><a href="#">OWC图表</a></li> <li class="Child"><img class=s src="s.gif"><a href="#">锁定表列</a></li> <li class="Child"><img class=s src="s.gif"><a href="#">B/S常用技巧</a></li> <li class="Child"><img class=s src="s.gif"><a href="#">操作xml</a></li> <li class="Child"><img class=s src="s.gif"><a href="#">生成guid</a></li> </ul> </li> </ul> </li> </ul> </li> <li class="Opened"> <img class=s src="s.gif" οnclick="javascript:ChangeStatus(this);"> <a href="#">第二大类</a> <ul> <li class="Opened"><img class=s src="s.gif" οnclick="javascript:ChangeStatus(this);"> <a href="#">我的文档</a> <ul> <li class="Opened"><img class=s src="s.gif" οnclick="javascript:ChangeStatus(this);"> <a href="#">JavaScrit</a> <ul> <li class="Child"><img class=s src="s.gif"><a href="#">常用小技巧</a></li> <li class="Child"><img class=s src="s.gif"><a href="#">围绕鼠标的文字</a></li> <li class="Child"><img class=s src="s.gif"><a href="#">OWC图表</a></li> <li class="Child"><img class=s src="s.gif"><a href="#">锁定表列</a></li> <li class="Child"><img class=s src="s.gif"><a href="#">B/S常用技巧</a></li> <li class="Child"><img class=s src="s.gif"><a href="#">操作xml</a></li> <li class="Child"><img class=s src="s.gif"><a href="#">生成guid</a></li> </ul> </li> </ul> </li> </ul> </li> </ul></div></body></html>
