DIV+CSS构成的树型菜单_html/css



这是用DIV+CSS+JS构成的树型菜单，采用列表,符合WEB标准，在大多数WIN浏览器下，兼容性不错，xhtml见效果页,我现在做的是二个菜单,如果需要添加,可把......之间的内容加上去,"submenuid"加1,查看效果。

CSS代码

body {	margin: 0px;	padding: 0;	font: 12px " 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: 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代码

function toggleMenu(id){
element = document.getElementById(id);
element.className = (element.className.toLowerCase() == 'expanded'?'collapsed':'expanded');
}
onload = function() {
toggleMenu('submenuid');
}