Tip: you can modify some code before running
<!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <ptml xmlns="http://www.w3.org/1999/xhtml" lang="gb2312"> <pead> <title>Second-level tree menu example: CSS TreeMenu</title> <style type="text/css" media="all">A, a: visited {color: #333; text-decoration: none;} a: hover {color: # f60;} body, td {font: 13px "Geneva ", "", "Arial", "Helvetica", sans-serif;} ul, li {margin: 0; padding: 0; list-style: none;} h1, h2, h3, h4, h5, h6 {margin: 0; padding: 0;} h1 {padding: 5px; color: #900; font: 16px bold "Geneva", "", "Arial", "Helvetica", sans-serif;} h1 small {font-size: 11px; font-weight: normal; color: #660 ;}. treeWrap {width: 200px ;}. menuBox. titBox ,. menuBox. titBox a: visited ,. menuBox2. titBox ,. menuBox2. titBox a: visited {margin-left: 10px; padding-left: 40px; color: #003; font-size: 12px; display: block ;}. menuBox. titBox h3 a {background: url (/upload/201011/20101103170215932 .gif) no-repeat 0 40% ;}. menuBox. titBox h3.Fst a {background: url (/upload/201011/20101103170215184 .gif) no-repeat 0 40% ;}. menuBox. titBox h3.Lst a {background: url (/upload/201011/20101103170215322 .gif) no-repeat 0 40% ;}. menuBox2. titBox h3 a {background: url (/upload/201011/20101103170215622 .gif) no-repeat 0 40% ;}. menuBox2. titBox h3.Fst a {background: url (/upload/201011/20101103170215343 .gif) no-repeat 0 40% ;}. menuBox2. titBox h3.Lst a {line-height: 250%; background: url (/upload/201011/20101103170215522 .gif) no-repeat 0 0 ;}. menuBox2. txtBox {display: none ;}. menuBox. txtBox ul li {padding-left: 65px; line-height: 150% ;}. menuBox. txtBox. num {color: # e00 ;}. menuBox. txtBox ul {background: url (/upload/201011/20101103170215650 .gif) repeat-y 16px 0 ;}. menuBox. txtBox ul li {background: url (/upload/201011/20101103170215266 .gif) no-repeat 28px 50% ;}. menuBox. txtBox ul li. lst {background: url (/upload/201011/20101103170215812 .gif) no-repeat 28px 50% ;}</style> <script type="text/javascript"> <!-- function ExChgClsName(Obj,NameA,NameB){ var Obj=document.getElementById(Obj)?document.getElementById(Obj):Obj; Obj.className=Obj.className==NameA?NameB:NameA; } function showMenu(iNo){ ExChgClsName("Menu_"+iNo,"MenuBox","MenuBox2"); } --> </script> </pead> <body> <p>CSS TreeMenu<small>By Fengyan @ IECN. Net</small></p> <div class="TreeWrap"> <div class="MenuBox" id="Menu_0"> <div class="titBox"><p class="Fst">Colleagues</p></div> <div class="txtBox"> <ul> <li>Dodo</li> <li>Xiaochun</li> <li>Kobayashi</li> <li>Xiaolong</li> <li class="Lst">Fengyan</li> </ul> </div> </div><!--MenuBox--> <div class="MenuBox2" id="Menu_1"> <div class="titBox"><p>Customer</p></div> <div class="txtBox"> <ul> <li>Dodo</li> <li>Xiaochun</li> <li>Kobayashi</li> <li>Xiaolong</li> <li class="Lst">Fengyan</li> </ul> </div> </div><!--MenuBox--> <div class="MenuBox2" id="Menu_2"> <div class="titBox"><p>Friend</p></div> <div class="txtBox"> <ul> <li>Dodo</li> <li>Xiaochun</li> <li>Kobayashi</li> <li>Xiaolong</li> <li class="Lst">Fengyan</li> </ul> </div> </div><!--MenuBox--> <div class="MenuBox2" id="Menu_3"> <div class="titBox"><p>Family</p></div> <div class="txtBox"> <ul> <li>Dodo</li> <li>Xiaochun</li> <li>Kobayashi</li> <li>Xiaolong</li> <li class="Lst">Fengyan</li> </ul> </div> </div><!--MenuBox--> <div class="MenuBox2"> <div class="titBox"><p class="Lst">Exit System</p></div> </div><!--MenuBox--> </div> </body> </ptml>
Tip: you can modify some code before running
