<!doctype HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > & lt;html xmlns= "http://www.w3.org/1999/xhtml" lang= "gb2312" > <pead> <title> Level Two 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", "Song Body", "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", "XXFarEastFont-Arial", "Arial", "Helvetica", Sans-serif;} H1 Small {font-size:11px;font-weight:normal;color: #660;} . treewrap {width:200px;} . Menubox. Titbox A,. Menubox. Titbox a:visited,. MenuBox2. Titbox A,. 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 Maple Rock @iecn.net</small>& lt;/h1> <div class= "Treewrap" > <div class= "menubox" id= "Menu_0" > <div class= "Titbox" ><p class = "Fst" > colleague </p></div> <div class= "Txtbox" > <ul> <li>Dodo</li> <li> Xiaochun </li> <li> Kobayashi </li> <li> Little Dragon </li> <li class= "Lst" > Maple rock </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> &L T;li> </li> <li> Little Dragon </li> <li class= "Lst" > Maple rock </li> </ul> </div> </div><!--menubox--> <div class= "MenuBox2" id= "menu_2" > <div class= "Titbox" ><p> friends </p></div> <div class= "Txtbox" > <ul> <li>dodo</li > <li> Xiaochun </li> <li> Kobayashi </li> <li> small dragon </li> <li class= "Lst" > Maple rock </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> Little Dragon </li> <li class= "Lst" > Maple rock </li> </ul> </d iv> </div><!--menubox--> <div class= "MenuBox2" > <div class= "titbox" ><p class= "Lst" > Exit system </p></div> </div><!--menubox--> </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
