Tree menu of div+css composition

css| Menu

This is a tree-shaped menu with Div+css+js, with a list, compliant with the Web standards, in most win browsers, compatibility is good, XHTML see effect page, I now do is two menu, if you need to add, you can put <ul class= "collapsed" id= " Submenuid2 ">......</ul> between the content plus go," submenuid "plus 1, to see the effect.

CSS Code

Body { margin:0px; padding:0; font:12px "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;& Nbsp;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:100px; 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;}
JS Code

function Togglemenu (ID) {
element = document.getElementById (ID);
Element.classname = (element.className.toLowerCase () = = ' expanded '? Collapsed ': ' expanded ');
}
onload = function () {
Togglemenu (' Submenuid ');
}