<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#menu li dl {display:none;}
#menu li.current dl {display:block;}
</style>
</head>
<body>
<ul id="menu">
<li>
<a href="###">list style</a>
<dl>
<dt>标题标题1</dt>
<dd>内容内容</dd>
<dd>内容内容</dd>
</dl>
</li>
<li>
<a href="###">list style</a>
<dl>
<dt>标题标题2</dt>
<dd>内容内容</dd>
<dd>内容内容</dd>
</dl>
</li>
<li>
<a href="###">list style</a>
<dl>
<dt>标题标题3</dt>
<dd>内容内容</dd>
<dd>内容内容</dd>
</dl>
</li>
</ul>
<script type="text/javascript">
<!--
(function(){
var menu=document.getElementById("menu");
var menuA=menu.getElementsByTagName("a");
var menuLi=menu.getElementsByTagName("li");
for(var i=0,len=menuA.length;i<len;i++){
menuA[i].onclick=(function(i){
return function(){
for(var j=0;j<len;j++){
menuLi[j].className="";
}
menuLi[i].className="current";
}
})(i)
}
})()
//-->
</script>
</body>
</html>
<!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=utf-8" />
<title>下拉折叠菜单</title>
<style type="text/css">
*{margin:0;padding:0;}
li{list-style:none;}
body{font-size:12px;}
#dropmenu {width:200px;margin:10px auto;}
#dropmenu li{line-height:20px;background:#f2f2f2;padding:0 0 0 10px;border-bottom:#dadada 1px soAd;}
#dropmenu li.active{background:#dadada;}
#dropmenu li a{color:#000; text-transform:capitalize; text-decoration:none;display:block;}
#dropmenu dl{display:none; position:relative;z-index:100;}
#dropmenu dt{height:20px;line-height:20px;padding:0 0 0 10px;background:#f90;}
#dropmenu dd{height:20px;line-height:20px;padding:0 0 0 10px;background:#FF9}
</style>
</head>
<body>
<ul id="dropmenu">
<li><a href="javascript:void(0);">list style</a>
<dl style="display:block">
<dt>二级菜单标题</dt>
<dd>二级菜单内容</dd>
<dd>二级菜单内容</dd>
</dl>
</li>
<li><a href="javascript:void(0);">list style</a>
<dl>
<dt>二级菜单标题</dt>
<dd>二级菜单内容</dd>
<dd>二级菜单内容</dd>
</dl>
</li>
<li><a href="javascript:void(0);">list style</a>
<dl>
<dt>二级菜单标题</dt>
<dd>二级菜单内容</dd>
<dd>二级菜单内容</dd>
</dl>
</li>
<li><a href="javascript:void(0);">list style</a>
<dl>
<dt>二级菜单标题</dt>
<dd>二级菜单内容</dd>
<dd>二级菜单内容</dd>
</dl>
</li>
<li><a href="javascript:void(0);">list style</a>
<dl>
<dt>二级菜单标题</dt>
<dd>二级菜单内容</dd>
<dd>二级菜单内容</dd>
</dl>
</li>
<li><a href="javascript:void(0);">list style</a>
<dl>
<dt>二级菜单标题</dt>
<dd>二级菜单内容</dd>
<dd>二级菜单内容</dd>
</dl>
</li>
<li><a href="javascript:void(0);">list style</a>
<dl>
<dt>二级菜单标题</dt>
<dd>二级菜单内容</dd>
<dd>二级菜单内容</dd>
</dl>
</li>
</ul>
<script type="text/javascript">
window.onload = function(){
var oUl = document.getElementById('dropmenu');
var oA = oUl.getElementsByTagName('a');
var oDl = oUl.getElementsByTagName('dl');
var i = j = 0;
for(i=0;i<oA.length;i++){
oA[i].index = i;
oA[i].onclick = function(){
for(j=0;j<oDl.length;j++){
if(oDl[this.index].style.display=="block"){
oDl[j].style.display="none";
oDl[this.index].style.display="none";
this.className ='';
}
else{
oDl[j].style.display="none";
oDl[this.index].style.display="block";
this.className='active';
}
}
}
}
}
</script>
</body>
</html>
